Stagger jQuery анимации

Я хочу анимировать ряд элементов в jquery 1.3, причем каждый следующий элемент начинается с середины первой анимации. Другими словами, Я хочу эффект половины очереди. Я попытался использовать приведенный ниже код, но он не работает. У кого-нибудь есть идеи?

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

PS: Я пытался использовать различные плагины jQuery" idle "или" pause", но подозреваю, что используемые методы были до jquery 1.3?

PPS: заранее спасибо за вашу помощь:)

2 6
jquery queue jquery-animate

2 ответа:

Вы можете попробовать что-то вроде этого: 

$("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.
  });
});

Общая идея здесь заключается в использовании вашего списка .projectItem - вы задерживаете анимацию от начала до 500 мс на элемент. Первый элемент (i=0) будет иметь задержку 0 мс и выполняться (почти) немедленно во время следующего цикла событий. Каждый другой элемент будет задерживаться на 500 мс перед ним, и так как ваша анимация длится 1000 мс, она начнется примерно на полпути к последней анимации элементов.

16

Я думаю, что проще разбить анимацию на 2 части (от непрозрачности 1 до 0,5 и от 0,5 до 0) и использовать обычную очередь (если разрыв возможен).

Этот код, если мы начнем с непрозрачности 1: 

$("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}); 
    });
  });
});
1