Question

我正在尝试用jQuery构建一个简单的轮播动画。任何时候都有3个可视图像，每个按钮可以向前或向后点击。中心图像上升30px以突出显示。当按下其中一个按钮时，中心图像应该下拉，然后所有三个图像一起向左或向右移动。

初始向上和向下动画可以正常工作，但在回调时，其他任何动画都不起作用。如果我硬编码方向，只有其中一个工作。我目前的代码或方法有问题吗？

ctr_right.click(function() { carouselAnimate("right") });
ctr_left.click(function() { carouselAnimate("left") });

function carouselAnimate(direction) {
    var offset = img_width + img_offset;
    img_focus.animate({"top": "+="+focus_offset}, "slow", function() {
        img_left.animate({direction: "-="+offset}, "slow"); 
        img_focus.animate({direction: "-="+offset}, "slow");    
        img_right.animate({direction: "-="+offset}, "slow");    
    });

};

Answer 1

我认为方向应该总是“左”，并且基于我假设的方向，你将要添加或删除偏移量。设置左/右位置之间的切换不是一个好方法，我不认为。

对我来说不太清楚的是，为什么你会以相同的方式单独制作动画。这不会同样有效：

ctr_right.click(function() { carouselAnimate("right") });
ctr_left.click(function() { carouselAnimate("left") });

function carouselAnimate(direction) {
    var offset = img_width + img_offset;
    img_focus.animate({"top": "+="+focus_offset}, "slow", function() {
        $(img_left, img_focus, img_right).each(function(){
           $(this).animate({direction: "-="+offset}, "slow");
        }); 
    });

};

最后的想法;如果以上内容未回答您的问题，请在jquery的animate选项中查看queue：false。

http://api.jquery.com/animate/#animate-properties-options

Jquery动画回调问题

1 个答案: