別のメソッドの関数内に.attrを入れると、jqueryが破損する

Question

以下、JSfiddleを投稿しました。 forループと配列リストを使ってJquery内の画像を変更しようとしています。何らかの理由で私だけでそれを置くとき、このコードはうまく動作します：

menuimage.delay(500).attr('src', cars[i]); 

が、私は

menuimage.delay(2000).toggleClass('nopacity', 1000, function(){ 
    menuimage.delay(500).attr('src', cars[i]); 
}); 
menuimage.delay(500).toggleClass('nopacity', 1000); 

を入れたときに、画像の変化が壊れているようです。なぜそうなのか分かりません。私はそれのJSfiddleを投稿しました。私は配列の外側にあるときに私が正しく欲しかった画像を変更するために、より低いコードを取得しましたが、この機能では別のセットアップからセットアップしている間、内部では動作しません。どんな助けと説明も感謝します。余分なコードなしで余分なコード

https://jsfiddle.net/nathanahartmann/hnkokka8/3/

と

https://jsfiddle.net/nathanahartmann/2xk7jzd5/1/

代わりに、forループともあなたは .promise().done(function(){});ようにそれを使用する必要がtoggleClassコールバックを持って知っているの

Answer 1

使用setInterval

jQueryは約束mあなたが.promise()を使ってアクセスできる遅延オブジェクトを返すエソード。この約束オブジェクトは、選択された要素のすべての実行アニメーションが完了した後に解決されます。その時点で、あなたはそれを完了メソッドにバインドすることができます。

$("document").ready(function(){ 
var menuimage=$("#menuImage") 
var cars = ['http://www.freedigitalphotos.net/images/img/homepage/87357.jpg', 'http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg']; 
var i = 0; 
    setInterval(function(){ 
    menuimage.delay(2000).toggleClass('nopacity', 1000).promise().done(function(){ 
     menuimage.delay(500).attr('src', cars[i]); 
    }); 
    menuimage.delay(500).toggleClass('nopacity', 1000); 
    i ++; 
    i = i % 2; 
    }, 5000) 

}) 

JSFIDDLE