jQuery动画回调问题

Question

我正在尝试使用jQuery构建简单的轮播动画。 随时可以显示3张可见图像，并通过单击按钮在每一侧上单击来前进或后退。 中心图像被提升30像素以突出显示。 当按下其中一个按钮时，中央图像应下降，然后所有三个图像一起向左或向右移动。

最初的向上和向下动画有效，但在回调上其他动画均无效。 如果我对这些方向进行硬编码，则只有其中一个有效。 我当前的代码或方法有问题吗？

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的动画选项中查看queue：false。

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