Jak zwiększyć opóźnienie animacji przy każdym przejściu pętli for?

Question

Najpierw stworzyłem podstawową demonstrację tego, co mam w tej chwili here.

Po drugie, javascript używam.

var boxes = ["#one","#two","#three","#four"]; 

boxhover = function(a){ 
    $("#hover").hover(
     function(){ 
      $(a).stop(true).delay(250).animate({opacity:1}); 
     }, 
     function(){ 
      $(a).stop(true).delay(250).animate({opacity:0}); 
     } 
    ) 
} 

for(var i=0; i<boxes.length; i++) 
{ 
    boxhover(boxes[i]) 
} 

Co mam nadzieję osiągnąć to, aby każde pole unoszą się jeden po siebie z opóźnieniem 250. Próbowałem dodanie opóźnienia dla funkcji animacji (jak widać powyżej) a także setTimeout w pętli for, ale bez powodzenia. Każda pomoc byłaby świetna.

Answer 1

Możesz przekazać indeks tablicy jako dodatkowy parametr do funkcji boxhover, a następnie wykonać mnożenie na współczynniku opóźnienia.

var boxes = ["#one","#two","#three","#four"]; 

boxhover = function(a, i){ 
    $("#hover").hover(
     function(){ 
      $(a).stop(true).delay(250 * i).animate({opacity:1}); 
     }, 
     function(){ 
      $(a).stop(true).delay(250 * i).animate({opacity:0}); 
     } 
    ) 
} 

for(var i=0; i<boxes.length; i++) 
{ 
    boxhover(boxes[i], i) 
} 

jsfiddle

alternatywne rozwiązanie:

Aby uniknąć wiązania wielokrotne obsługi zdarzeń unosić na #hover i konieczności utrzymywania tablicę identyfikatorów, można wykonać następujące czynności:

$("#hover").on({ 
    'mouseenter': function(e) { 
     // Animate the box set to visible 
     animateBoxSet(1); 
    }, 
    'mouseleave': function(e) { 
     // Animate the box set to invisible 
     animateBoxSet(0); 
    } 
}); 

function animateBoxSet(opacity) { 
    // For each box 
    $('.box').each(function (index, element) { 
     // Set the delay based on the index in the set 
     var delay = 250 * index; 
     // Animate it the visibility after the delay 
     $(element).stop(true).delay(delay).animate({ 
      'opacity': opacity 
     }); 
    }); 
} 

jsfiddle