infinite loop - jQuery looping section of an animation - update: sample animation -


i trying loop sections of animation not having luck. have tried few suggestions other forum not seem work.

can please give me few pointers. help.

update: here sample animation on jsfiddle

$(window).load(function() {  $("#div1").animate({ "top": "0px" }, 2000, 'easeoutexpo');  $("#div2").animate({ "top": "0px" }, 2000, 'easeoutexpo', function() { $("#div3").animate({ "top": "0px" }, 2000, 'easeoutexpo');  $("#div4").animate({ "top": "0px" }, 2000, 'easeoutexpo');  // repeat here // !function repeat() {  $("#div1").delay(5000).animate({ "top": "-300px" }, 2000, 'easeoutexpo');  $("#div5").delay(5000).animate({ "top": "-300px" }, 2000, 'easeoutexpo');  $("#div2").delay(10000).animate({ "top": "-300px" }, 2000, 'easeoutexpo');  $("#div6").delay(10000).animate({ "top": "-300px" }, 2000, 'easeoutexpo');  $("#div3").delay(13000).animate({ "top": "-300px" }, 2000, 'easeoutexpo');  $("#div7").delay(15000).animate({ "top": "-300px" }, 2000, 'easeoutexpo')  $("#div1").delay(15000).animate({ "top": "0" }, 2000, 'easeoutexpo');  $("#div5").delay(15000).animate({ "top": "0" }, 2000, 'easeoutexpo');  $("#div2").delay(15000).animate({ "top": "0" }, 2000, 'easeoutexpo');  $("#div6").delay(15000).animate({ "top": "0" }, 2000, 'easeoutexpo');  $("#div3").delay(15000).animate({ "top": "0" }, 2000, 'easeoutexpo');  $("#div7").delay(15000).animate({ "top": "0" }, 2000, 'easeoutexpo')  }   $(document).ready(function() {  repeat(); });  }); }); 

that's mess, many different speeds, delays, elements etc. it's hard join together. there must easier way this, best come like

$(function() {     $("#div1, #div2").animate({         "top": "0px"     }, 2000, 'easeoutexpo', function () {         $("#div3, #div4").animate({             "top": "0px"         }, 2000, 'easeoutexpo');         (function fn() {             $.when(                 $('#div1, #div5').delay(5000).animate({                     "top": "-300px"                 }, 2000, 'easeoutexpo'),                 $("#div2, #div6").delay(10000).animate({                     "top": "-300px"                 }, 2000, 'easeoutexpo'),                 $("#div3").delay(13000).animate({                     "top": "-300px"                 }, 2000, 'easeoutexpo'),                 $("#div7").delay(15000).animate({                     "top": "-300px"                 }, 2000, 'easeoutexpo'),                 $('#div1, #div2, #div3, #div5, #div6, #div7').animate({                     "top": "0"                 }, 2000, 'easeoutexpo')             ).done(fn);         })();     }); }); 

fiddle


Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -