如何停止快速点击动画发生的jQuery

Question

我正在做图像幻灯片放映。 左侧将有一组图像，用户可以单击上或下图像以查看其余图像。 我一次只显示3张图片。 我这样做的方法是向上滑动第一个，将其移到底部。 同时，向上滑动第四个以显示它。

这是我的jQuery代码：

$("#goup").click(function(e) {

    $("#imgslide > img:first")
        .slideUp(500,function(e){
            $(this).appendTo("#imgslide");
            });

    $("#imgslide > img:eq(3)").slideToggle({direction:"up"},500);
    // move the paragraph with the image    index sync  
    $("#product_description > div:first")
        .appendTo("#product_description");  
});

我在这些图像上没有任何ID或类（要使用Ajax生成这些<img>标签），当我缓慢单击时它可以工作。 如果快速双击，第三张图像消失了。 有什么方法可以阻止用户快速单击，还是可以等待上一个操作完成才能转到下一个操作？

Answer 1

$("#goup").click(function(e) {

   $("#imgslide > img:first")
       .slideUp(500,function(e){
           $(this).appendTo("#imgslide");
           });

   $("#imgslide > img:eq(3)").slideToggle({direction:"up"},500);
   // move the paragraph with the image    index sync  
   $("#product_description > div:first")
       .appendTo("#product_description");
   return false;

});

Answer 2

好的，您可以在元素上禁用双击事件，因此元素将不会响应双击事件。

$("#goup").dblclick(function(e) {
e.preventDefault();
}

Answer 3

在您的click函数中放置一个布尔变量，以检查imgslide是否处于过渡/动画模式。 如果单击的是true，则一旦slidetoggle完成，则将其“ false”设置为false。

var clicked = false;
$("#goup").click(function(e) {

if(clicked) return;

clicked= true;

$("#imgslide > img:first")
   .slideUp(500,function(e){
       $(this).appendTo("#imgslide");
       });

$("#imgslide > img:eq(3)").slideToggle({direction:"up",complete:function(){
  clicked= false;

}},500);
// move the paragraph with the image    index sync  
$("#product_description > div:first")
   .appendTo("#product_description");
return false;
});