Функция jQuery цепочки несвязанных объектов

Question

Я, конечно, искал SO для ответа на мой «конкретный» вопрос, но не нашел ничего, что позволило мне достичь моей желаемой цели. В принципе, я хотел бы иметь возможность объединять вызовы функций с возможностью добавления «задержки» между этими вызовами. Я полагаю, что потребуется что-то вроде линии setTimeout(). Однако, поскольку эти вызовы асинхронны, я, очевидно, не могу просто объединить их и надеяться на результат. Я видел ссылку на встроенную функцию jQuery и функции dequeue и полагал, что на этом что-то может работать. До сих пор я не смог придумать ничего, что приблизилось к моему требованию.

Я создал очень простой пример, который показывает, что я пытаюсь достичь, приковав здесь (кстати - jsfiddle это время немного медленно сегодня):

http://jsfiddle.net/jimibt/wZeTT/

это использует вложенные вызовы setInterval , поэтому противно и не масштабируется. Моя нирвана будет метод расширения JQuery, который имел следующий синтаксис (первые парами являются функцией, вторые паров быть setTimout задержки значения):

$().chain($('#strap1').fadeIn(1300), 500) 
    .chain($('#strap2').fadeIn(1300), 500) 
    .chain($('#strap3').fadeIn(1300), 500) 
    .start(); 

Теперь я знаю, что есть задержка() функция JQuery, но это только работает (насколько мне известно) как часть цепи против одного селектора и, следовательно, не может использоваться для объединения нескольких несвязанных элементов в соответствии с моим примером. Я вижу это связано SO вопрос, который близок к тому, что я надеялся, но все еще не завернутые так, как я бы хотел:

Chaining jQuery animations that affect different elements

Любые мысли?

Answer 1

Вы можете использовать delay и queue методы цепных анимации:

$('#strap1').delay(500).fadeIn(1300).queue(function(){ 
    $('#strap2').delay(500).fadeIn(1300).queue(function(){ 
     $('#strap3').delay(500).fadeIn(1300); 
    }); 
}); 

Демо: http://jsfiddle.net/Guffa/8QZcN/

Answer 2

Вы можете использовать обратные вызовы, как этот

$('#strap1').delay(500).fadeIn(1300,function(){ 
    $('#strap2').delay(500).fadeIn(1300,function(){ 
     $('#strap3').delay(500).fadeIn(1300); 
    }); 
}); 

Использование^[demo]

$('#strap1').delay(500).fadeIn(1300,function(){ 
    $('#strap2').delay(500).fadeIn(1300,function(){ 
     $('#strap3').delay(500).fadeIn(1300, function() { 
      $('#strapline').css({ 
       'color': '#fff' 
      }).animate({ 
       'color': color 
      }, 3000);    
     }); 
    }); 
});