javascript - jQuery 动画数组跳到最后

Question

我正在尝试使用 Jquery 为图像数组制作动画。当我在数组中有一个元素时，它工作正常，但当我有一个以上的元素时，它只会为数组的最后一个元素设置动画。

我设置了img标签的src，并向右移动。 moveRight 函数将图像向右移动并调用 moveLeft 将其向左移动。 moveLeft 函数将图像向左移动并淡出。

$.each(imageArray, function (i, val) {
    $("#b").attr("src", imageArray[i].src);
    moveRight();
}

function moveRight(){
    $("#b").animate({left: "+=500"}, 2000, moveLeft)
}

function moveLeft(){
    $("#b").animate({left: "-=500"}, 2000,fade)
}

有没有一种方法可以左右移动每张图片/或者只是左右移动而不是只移动最后一张图片。我想弄清楚我的代码有什么问题。

Answer 1

我认为你能做的最好的事情就是使用递归方法。这是一个示例 ( check jsFiddle ):

var MyApp = {

    Items: {

        Elements: $('div'),

        Loaded: 0

    },

    Start: function(){
        if( this.Items.Elements.length == this.Items.Loaded ) return; // return.. or play a sound, then return to stop iterations

        this.Items.Elements.eq(this.Items.Loaded).animate({ left: '50%' }, { 
            duration: 1000,
            complete: function(){
                MyApp.Items.Loaded++;
                MyApp.Start();
            }
        });
    }

};

$(function(){ 
    MyApp.Start();
});

这是一个示例，但您可以通过这种方式轻松完成。