Итерация через массив JQuery

Question

Я пытаюсь перебирать массив и присвоить значения элемента как такового:

<tool>hammer</tool> 

var tools = ["screwdriver", "wrench", "saw"]; 
var i; 
for (i=0; i < tools.length; ++i){ 
$("tool").delay(300).fadeOut().delay(100).html(tools[i]).fadeIn(); 
}; 

Однако это не похоже на работу, как только «видел» назначается в качестве html и сохраняет затухание.

Что я здесь делаю неправильно?

Answer 1

jQuery.delay() паузы между эффекты в очереди, поэтому ваш .html() устанавливается мгновенно. Следовательно, вы видите только saw.

Решение состоит в том, чтобы отказаться от цикла for и «петля» против длины массива, установив tool текст к следующему первым элементу в массиве (как вы удалите его). Однако вам нужно сделать это в контексте очереди, поэтому вы можете использовать обратный вызов .fadeOut() для этого.

Wrap все это в функции (здесь, я сразу же вызвать его, но дать ему метку, a, так что можно ссылаться, не анонимным) и передать, что .fadeIn() в конце так продолжается цикл пока массив не станет пустым.

var tools = ["screwdriver", "wrench", "saw"]; 

(function a(){ 
    if (tools.length) { 
     $("tool").delay(300).fadeOut(0, function(){ 
      $(this).html(tools.shift()); 
     }).delay(100).fadeIn(a); 
    } 
})(); 

http://jsfiddle.net/tc1q1vv7/1/