Question

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

这是我的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>标记）当我慢慢点击它时，它工作。如果我快速双击，第3张图像就消失了。有什么方法可以阻止用户快速点击，还是可以等到最后一个操作完成到下一个？

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函数中放置一个变量boolean来检查imgslide是否处于转换/动画模式。如果clicked为true，则在完成slidetoggle后返回“donothing”将其设置为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;
});

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

3 个答案: