Question

我的js代码存在一些问题。我想动画一个简单的点击功能，以便div显示下面的div，但在说5秒后动画回来。我认为我得到了正确的设置与fadeToggle和延迟但我只是不知道如何设置“过度点击”预防。我的意思是当人们弄乱点击对象时。

我的第一次尝试是stop(true,true)。虽然看起来它按预期工作（中止进一步的函数执行），但遗憾的是它显示了5秒后的底层div，尽管它应该显示上面的一个（图片）。

这是js和小提琴：

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

但也是一个js小提琴链接，看看我的意思：

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

此致

PS：先尝试点击一下，查看我想要完成的效果，然后点击2次，看看5秒后它将如何显示文字div。

Answer 1

我稍微修改了一下，

但仍然需要做一些工作，你可以使用一些标志变量，点击，

请查看更新的'fiddle`，它会处理该过程，但会存储淡出后的下一次点击。

更新：避免双击

创建一个标志，您将创建一个布尔变量，该变量将为true / false。（或带有0或1的int变量），

像：

var flg=true;

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

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

我希望这会有所帮助..

正确使用停止和延迟

1 个答案: