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

下面是您嘗試實現的一個非常基本的示例。從這裏你可以嘗試和過渡動畫，切換它，使按鈕激活左/右改變。我會建議玩這個，直到你對基本功能感到滿意爲止。從那裏你可以看看可以幫助你的插件/庫。 http://jsfiddle.net/306Lqov5/1/

HTML

<img id="b" src="http://placehold.it/100/100&text=Image 1" /> 

的JavaScript

var images = [ 
    'http://placehold.it/100/100&text=Image 1', 
    'http://placehold.it/100/100&text=Image 2', 
    'http://placehold.it/100/100&text=Image 3', 
    'http://placehold.it/100/100&text=Image 4' 
]; 

var index = 1, //start at one since we have the first image in by defualt 
    img = $('#b'); 

setInterval(function(){ 
    img.attr('src', images[index]); 
    index++; //index = index + 1; 

    if (index == images.length){ //if we've reached the length of the array reset to zero 
     index = 0; 
    } 
},2000); //switch ever 2 seconds 

Answer 2

這個怎麼樣變：http://jsbin.com/xezetuboye/1/edit?html,js,output？

var arr = [ 
    'http://e404.pw/pictures/evernote-logo.png', 
    'http://e404.pw/pictures/font-face.png', 
    'http://e404.pw/pictures/html-coder.jpg' 
]; 
var count = 0; 

function setImg(){ 
    if(arr.length <= count){ return; } 
    $("#b").attr("src", arr[count]); 
    moveRight(); 
    count++; 
} 

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

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

} 

setImg(); 

Answer 3

我認爲你可以做的最好的事情就是使用遞歸方法。下面是一個例子（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(); 
}); 

這是一個例子，但可以通過這種方式很容易地做到這一點。

Answer 4

嘗試使用.queue()。請注意，如果更改src相同的img元素，則必須等到每個圖像加載完畢。

var imageArray = [ 
 
    "http://lorempixel.com/100/100/cats", 
 
    "http://lorempixel.com/100/100/animals", 
 
    "http://lorempixel.com/100/100/technics", 
 
    "http://lorempixel.com/100/100/nature" 
 
]; 
 

 
var b = $("#b"); 
 

 
var cycle = function cycle() { 
 
    return b.queue("slide", $.map(imageArray, function(val, i) { 
 
    return function(next) { 
 
     $(this).fadeOut(50).attr("src", val); 
 
     this.onload = function() { 
 
     return $(this).fadeIn(50, function() { 
 
      return moveRight.call(this).then(function() { 
 
      return moveLeft.call(this) 
 
      }).then(next); 
 
     });    
 
     } 
 
    } 
 
    })).dequeue("slide"); 
 
}; 
 

 
function moveRight() { 
 
    return $(this).animate({ 
 
    left: "500" 
 
    }, 2000).promise() 
 
} 
 

 
function moveLeft() { 
 
    return $(this).animate({ 
 
    left: 0 
 
    }, 2000).promise() 
 
} 
 

 
var infiniteCycle = function infiniteCycle() { 
 
    return cycle().promise("slide").then(infiniteCycle) 
 
}; 
 

 
infiniteCycle();

#b { 
 
    position: relative; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<img id="b" />