Question

我想要的是：我创建了一种带有缩略图滑块的图片库，我希望缩略图在点击导航按钮时滚动，但如果在动画完成之前再次按下按钮则不会保留添加到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.
            }); 
        }
    });

Answer 1

试试这个：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.
        }); 
    }
});

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

1 个答案: