Stagger jQuery Анимация

Question

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

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

PS: Я пытался использовать различные «холостой ход» или «пауза» JQuery плагин, но я подозреваю, что методы, используемые предварительно JQuery 1,3?

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

Answer 1

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

$("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 мс, она начнется примерно на полпути через анимацию последних элементов.

Answer 2

Я думаю, что это проще разбить анимацию на 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}); 
    }); 
    }); 
});