1

我的 js 代码有一些问题。我想为一个简单的单击功能设置动画，以便一个 div 显示下面的 div，但在 5 秒后动画回来。我认为我使用 fadeToggle 和 delay 进行了正确的设置，但我只是不明白如何设置“过度点击”预​​防。我的意思是当人们弄乱点击对象时。

我的第一次尝试是stop(true,true). 尽管它似乎按预期工作（中止进一步的函数执行），但不幸的是，它在 5 秒后显示了底层 div，尽管它应该显示上面的 div（图片）。

这是js和小提琴：

$(function() {
  $("#boxes li").on("click", function(){    
    $(this).find(".front,.back").stop(true, true).fadeToggle(800).delay(5000).fadeToggle(800); 
  });
});

还有一个 js fiddle 链接，看看我的意思：

http://jsfiddle.net/sfiddle/bqbPL/

问候，

PS：尝试先点击一次，看看我想要达到什么效果，然后点击2次，看看5秒后它会如何显示文本div。

4

1 回答 1

0

我稍微修改了一下，

但仍需要一些工作，您可以通过点击使用一些标志变量，

请查看更新后的“小提琴”，它会处理该过程，但会存储在它淡出后发生的下一次点击。

更新：避免双击

创建一个标志是，您将创建一个布尔变量，它是真/假。（或带 0 或 1 的 int 变量），

喜欢：

var flg=true;

现在，这个变量称为 flag，flag 以 False/True 值启动（根据要求）然后我们将在事件发生后修改 flag（我们要注意的事件，这里单击按钮）一旦事件发生，我们将更改旗帜。

在第二个中，您将在条件中添加标志。if( condition == true && flag == true) {....}因此，如果在事件/单击事件后标志更改为假，则不会再次发生。

我希望这个能帮上忙..

于 2013-03-11T10:23:39.303 回答