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); })(); }); });
Comments
Post a Comment