jQuery bir dizi Ben bir resim sürgüsünü inşa etmeye çalışıyorum her seferinde (yerine hepsinden aynı anda)

Question

teker nesneleri hareketlendirmek için nasıl. (Oraya eklentileri ton var biliyorum, ama bu eğitim amaçlı fazlasıdır).

Temelde, Z-endeksine sahip görüntülerin bir dizi var: 0. Ne yapmaya çalışıyorum, sonra görüntülerin her birini seçmek ve 1 indeksini değiştirmek, görüntüler setini almak opaklığını animasyon olduğunu Bir sonraki görüntü aynı şeyi yapacak ve bundan sonra, 0'dan geri koyun.

Bu ilk bölümüdür, ama bende sorun ben bu bölümü test ediyorum, tüm görüntüler aynı anda animasyon yapmak olmasıdır. Birbiri ardına yapmak yerine. Sana gibi geri arama işlevlerini kullanabilirsiniz biliyoruz:

image1.animate(the animation, function({ 
     image2.animation(the animation, function({ 
       image3.animation(the animation, function}) etc... 

})

Ama fazla görüntü olsaydı daha karmaşık hale gelecektir. Bunu yapmanın daha verimli bir yol bulmaya çalışıyorum, ancak ben cevap bulamıyorum.

images.each(function() { 
    $(this).css({ 
     "opacity" : "0.0", 
     "z-index" : "1" 
    }).animate({ 
     opacity: "1.0" 
    }, 3000); 
}); 

ama çalışmıyor:

Bu denedim budur. Tüm görüntüler aynı anda animasyon yapıyor. Hatta bir "için" döngü ile çalıştım, ama aynı şeyi olsun:

for (var i=0; i<images.length; i++){ 
    images.eq(i).css({ 
     "opacity" : "0.0", 
     "z-index" : "1" 
    }).animate({ 
     opacity: "1.0" 
    }, 3000); 
} 

ben yanlış bir şey yapıyorum biliyorum ama bunun ne olduğunu çözemiyorum. Herhangi bir yardım varsa, çok takdir edilecektir!

Answer 1

kullanın böyle bir .delay(), Bu yüzden hiç de, .each() callback'inde 3000*0 ms gecikir ilk için ilk parametre olarak geçirilen öğenin dizinini kullandığından

images.each(function (i) { 
    $(this).delay(3000*i) 
      .css({ opacity : 0, "z-index": 1 }) 
      .animate({ opacity: 1 }, 3000); 
}); 

, ikinci gecikmeler 3000ms, vs ... yani birbiri ardına canlandırıyorlar. (bunu yapardım nasıl olan) delay kullanmak istemiyorsanız

Answer 2

Kullanım .queue(), tekrarlamalı bir fonksiyon kullanılarak, böyle bir şey yapabileceğini onlara http://api.jquery.com/queue/

Answer 3

ayarlamak için.

function animateImage(images, i) { 
  $(this).css({ 
   "opacity" : '0.0', 
   "z-index" : "1" 
  }).animate({ 
     opacity: "1.0" 
    }, 3000, function() { 
     var next = i + 1; 
    
     if (next < images.length) { 
      animateImage(images, next); 
     } 
    }); 
} 

animateImage(images, 0);