javascript - How to increase the delay on animation on every pass of a for loop -

javascript - How to increase the delay on animation on every pass of a for loop -

first i've created basic demonstration of have @ moment here.

second javascript i'm using.

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

what i'm hoping accomplish have each box hover 1 after each other delay time of 250. i've tried adding delay animation function (as can see above) , settimeout in loop, no luck. help great.

you can pass in array index additional parameter boxhover function , perform multiplication on delay factor.

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 solution:

to avoid binding multiple hover event handlers on #hover , having maintain array of ids, can following:

$("#hover").on({ 'mouseenter': function(e) { // animate box set visible animateboxset(1); }, 'mouseleave': function(e) { // animate box set invisible animateboxset(0); } }); function animateboxset(opacity) { // each box $('.box').each(function (index, element) { // set delay based on index in set var delay = 250 * index; // animate visibility after delay $(element).stop(true).delay(delay).animate({ 'opacity': opacity }); }); }

jsfiddle

javascript jquery for-loop jquery-animate delay