Come aumentare il ritardo sull'animazione su ogni passaggio di un ciclo for

Question

Per prima cosa ho creato una dimostrazione di base di ciò che ho al momento here.

Secondo questo è il javascript che sto usando.

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]) 
} 

Quello che sto sperando di raggiungere è quello di avere ogni casella librarsi uno dopo l'altro con un tempo di ritardo di 250. Ho provato ad aggiungere un ritardo per la funzione di animazione (come potete vedere sopra) e anche un setTimeout nel ciclo for, ma senza fortuna. Qualsiasi aiuto sarebbe grande.

Answer 1

È possibile passare l'indice di array come parametro aggiuntivo alla funzione boxhover e quindi eseguire una moltiplicazione sul fattore di ritardo.

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

Soluzione alternativa:

Per evitare più gestori di eventi hover vincolanti #hover e dover mantenere una matrice di ID, è possibile effettuare le seguenti operazioni:

$("#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