javascript - 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