单击导航按钮时，如何停止查询动画que

how do I stop the query animation que when a nav button is clicked

本文关键字：何停止 查询 动画 que 导航 按钮 单击      更新时间：2023-09-26

我想要的是：我创建了一种带有缩略图滑块的图像库，我希望在单击导航按钮时滚动缩略图，但如果在动画完成之前再次按下按钮，它不会一直添加到que中，它会清除que，只完成当前动画。

我的问题是：当点击按钮时，它会将点击动画放在一个que中，并按顺序完成所有点击。也许有人能帮我们更好地表达这一点。

我尝试过的：我尝试过将.finish（）和.stop（true，true）添加到我的js文件中，但似乎无法正常工作。我可能把它放错了地方，甚至用错了东西，我不知道，所以我需要一些帮助。

下面是一个正在运行的jsfiddle：http://jsfiddle.net/ma9j6o09/2/
其中一些不起作用，因为我的图像是本地托管的，但缩略图的滑块部分是。

这是我为动作设置动画的功能；我要添加什么才能获得所需的效果？

var clicks = 0;
    $("#right").click(function() {
       if ( clicks < 5 ) {
           clicks++;
       $("#thumbContainer").animate({
            left: "-=128px"
            }, 500, function() {
            // Animation complete.
            }); 
        }    
    });
    $("#left").click(function() {
       if (clicks > 0) {
           clicks--;
       $("#thumbContainer").animate({
            left: "+=128px"
            }, 500, function() {
            // Animation complete.
            }); 
        }
    });

试试这个：http://jsfiddle.net/ma9j6o09/3/

在回答您关于.stop()的问题时，您可以这样使用它：

$("#thumbContainer").stop(true, true).animate({
        left: "+=128px"
    }, 500, function() {
        // Animation complete.
    }); 
});

但这确实不会达到你想要的效果，因为这意味着它会停止动画并直接跳到最后一帧，这样你就会失去你想要的动画。

相反，使用我在小提琴中使用的标志，这使得在动画进行时甚至无法尝试动画。

var clicks = 0,
    animating = false;
$("#right").click(function() {
   // Only animate if we are not already animating
   if ( clicks < 5 && !animating ) {
       animating = true;
       clicks++;
   $("#thumbContainer").animate({
        left: "-=128px"
        }, 500, function() {
            animating = false; // No longer animating
            // Animation complete.
        }); 
    }    
});
$("#left").click(function() {
   // Only animate if we are not already animating
   if (clicks > 0 && !animating) {
       animating = true;
       clicks--;
   $("#thumbContainer").animate({
        left: "+=128px"
        }, 500, function() {
            animating = false; // No longer animating
            // Animation complete.
        }); 
    }
});
相关文章：