So erhöhen Sie die Verzögerung bei der Animation bei jedem Durchlauf einer for-Schleife

Question

Zuerst habe ich eine grundlegende Demonstration von dem erstellt, was ich gerade habe here.

Zweitens ist dies das Javascript, das ich benutze.

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

Was ich hoffe, zu erreichen, ist jede Box einen schweben zu lassen, nachdem die sie mit einer Verzögerungszeit von 250 Ich habe versucht, eine Verzögerung die Animationsfunktion hinzugefügt (wie oben sehen) und auch ein setTimeout in der for-Schleife, aber kein Glück. Jede Hilfe wäre großartig.

Answer 1

Sie können den Array-Index als zusätzlichen Parameter an Ihre boxhover-Funktion übergeben und dann eine Multiplikation mit dem Verzögerungsfaktor durchführen.

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

Alternative Lösung:

Bindung mehrere Hover-Event-Handler auf #hover Um zu vermeiden, und eine Reihe von IDs zu erhalten, so können Sie Folgendes tun:

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