2009-12-30 20 views
6

JQuery 1.3'te bir dizi nesneyi canlandırmak istiyorum, her bir sonraki öğe ilk animasyonun yarısında başlıyor. Diğer kelimelerde, bir yarı sıra etkisi istiyorum. Aşağıdaki kodu kullanmaya çalıştım ama çalışmıyor. Herhangi bir fikri olan var mı?Yankı jQuery Animations

$("h3").click(function(){ 
     $(".projectItem").each(function (i) { 
     if (i > 0){ 
      setTimeout ("", 500); 
     } 
     $(this).animate({"opacity": 0, "duration": 1000}); 
     }); 
    }); 

Not: Bana, "boşta" veya jquery eklentileri "pause" Çeşitli kullanmayı denedi ama kullanılan teknikler öncesi jquery 1.3 idi şüpheli?

PPS: Yardımlarınız :)

cevap

15

Böyle bir şey deneyebilirsiniz:: Biz opaklıkta 1 başlayacak eğer

Bu kodudur

$("h3").click(function(){ 
    $(".projectItem").each(function (i) { 
    // store the item around for use in the 'timeout' function 
    var $item = $(this); 
    // execute this function sometime later: 
    setTimeout(function() { 
     $item.animate({"opacity": 0}, 1000); 
    }, 500*i); 
    // each element should animate half a second after the last one. 
    }); 
}); 

genel yaklaşım şöyledir .projectItem listenizi kullanıyor - Animasyon gecikme Başına ürün başına 500ms. İlk öğe (i=0) 0ms gecikme ve sonraki olay döngüsü sırasında hemen (hemen) yürütecek. Birbirinden başka öğe, öğenin başına 500 ms geciktirilir ve animasyonunuz 1000 ms sürdüğü için, son öğeler animasyonunun yaklaşık yarısında başlayacaktır.

+1

Sen benim kahramanımsın. <3 – Matrym

+2

Ayrıca setTimeout kullanmak yerine $ item.delay (500 * i) .animate (...) da yapabilirsiniz. Mükemmel cevap! – T3db0t

1

için şimdiden teşekkür ederiz ben 2 parçalara animasyon kırmak için daha basit olduğunu düşünüyorum (0,5 opaklık 1'den ve 0'a 0,5 ila) ve kırılma durumunda (normal kuyruğu kullanmak mümkün).

$("h3").click(function(){ 
    $(".projectItem").each(function (i) { 
    $(this).animate({"opacity": 0.5, "duration": 500}, function(){ 
     //... put here something in the half way ... 
     $(this).animate({"opacity": 0, "duration": 500}); 
    }); 
    }); 
}); 
+0

Denemek için herhangi bir sözdizimi/kodunuz var mı? – Matrym

İlgili konular