javascript - animation pattern not working properly -
i trying animation pattern.all paterns except last 6 working properly. want last 6 pattern happen after other patternshave happened.but using code oscillates in different manner. last6 pattern doesn't happen together. plz me code
$j(document).ready(function () { $j("#circle").show().animate({ top: '260px' }, 1000, function () { $j("#v_logo").animate({ opacity: '1' }, 400, function () { $j("#v_logo").animate({ height: '150px', width: '100px', top: '260px', left: '450px' }, 2000, function () { $j("#s_logo").animate({ opacity: '1' }, 400, function () { $j("#s_logo").animate({ height: '150px', width: '100px', top: '260px', left: '450px' }, 2000, function () { $j("#circle,#v_logo,#s_logo").animate({ height: '300px', width: '200px', top: '180px', left: '380px' }, 2000, function () { $j("#circle,#v_logo,#s_logo").animate({ height: '100px', width: '66px', top: '110px', left: '20px' }, 1500, function () { $j("#v").animate({ height: '120px', width: '120px', top: '300px', left: '130px', opacity: '1' }, 500, function () { $j("#s").animate({ height: '100px', width: '100px', top: '260px', left: '260px', opacity: '1' }, 500, function () { $j("#t").animate({ height: '120px', width: '120px', top: '300px', left: '350px', opacity: '1' }, 500, function () { $j("#u").animate({ height: '120px', width: '120px', top: '260px', left: '460px', opacity: '1' }, 500, function () { $j("#d").animate({ height: '120px', width: '120px', top: '300px', left: '600px', opacity: '1' }, 500, function () { $j("#y").animate({ height: '120px', width: '120px', top: '260px', left: '710px', opacity: '1' }, 500, function () { $j("#v").animate({ height: '120px', width: '120px', top: '280px', left: '130px', opacity: '1' }); $j("#s").animate({ height: '100px', width: '100px', top: '280px', left: '260px', opacity: '1' }); $j("#t").animate({ height: '120px', width: '120px', top: '280px', left: '350px', opacity: '1' }); $j("#u").animate({ height: '120px', width: '120px', top: '280px', left: '460px', opacity: '1' }); $j("#d").animate({ height: '120px', width: '120px', top: '280px', left: '600px', opacity: '1' }); $j("#y").animate({ height: '120px', width: '120px', top: '280px', left: '710px', opacity: '1' }); }); }); }); }); }); }); }); }); }); }); }); }); }); }); my html code is
<img src="circle.gif" id="circle"style="position:absolute;top:100px;left:450px;display:none;height:150px;width:100px" /> <img src="v_logo.gif" id="v_logo"style="position:absolute;top:340px;left:495px;opacity:0;height:2px;width:2px" /> <img src="s_logo.gif" id="s_logo"style="position:absolute;top:340px;left:520px;opacity:0;height:2px;width:2px" /> <img src="v.gif" id="v"style="position:absolute;top:300px;left:20px;height:120px;width:120px;opacity:0" /> <img src="s.gif" id="s"style="position:absolute;top:100px;left:260px;height:100px;width:100px;opacity:0" /> <img src="t.gif" id="t"style="position:absolute;top:550px;left:350px;height:120px;width:120px;opacity:0" /> <img src="u.gif" id="u"style="position:absolute;top:100px;left:460px;height:120px;width:120px;opacity:0" /> <img src="d.gif" id="d"style="position:absolute;top:550px;left:600px;height:120px;width:120px;opacity:0" /> <img src="y.gif" id="y"style="position:absolute;top:260px;left:970px;height:120px;width:120px;opacity:0" />
because animate on multiple element $("#circle,#v_logo,#s_logo") callback fired each (three times in case). can prevent happening creating boolean variable. switch boolean variable once first complete , prevent rest of code run muktple times.
also, when animating same element multiple times, can let jquery's queue hard work ;)
$(document).ready(function () { $j = jquery; $j("#circle").show().animate({ top: '260px' }, 1000, function () { $j("#v_logo").animate({ opacity: '1' }, 400); $j("#v_logo").animate({ height: '150px', width: '100px', top: '260px', left: '450px' }, 2000, function () { $j("#s_logo").animate({ opacity: '1' }, 400); $j("#s_logo").animate({ height: '150px', width: '100px', top: '260px', left: '450px' }, 2000, function () { $j("#circle,#v_logo,#s_logo").animate({ height: '300px', width: '200px', top: '180px', left: '380px' }, 2000); var firstdone = false; $j("#circle,#v_logo,#s_logo").animate({ height: '100px', width: '66px', top: '110px', left: '20px' }, 1500, function () { if(!firstdone) { firstdone = true; $j("#v").animate({ height: '120px', width: '120px', left: '130px', opacity: '1' }, 500, function () { $j("#s").animate({ top: '260px', opacity: '1' }, 500, function () { $j("#t").animate({ top: '300px', opacity: '1' }, 500, function () { $j("#u").animate({ top: '260px', opacity: '1' }, 500, function () { $j("#d").animate({ top: '300px', opacity: '1' }, 500, function () { $j("#y").animate({ left: '710px', opacity: '1' }, 500, function () { $j("#v").animate({ top: '280px' }); $j("#s").animate({ top: '280px' }); $j("#t").animate({ top: '280px' }); $j("#u").animate({ top: '280px' }); $j("#d").animate({ top: '280px' }); $j("#y").animate({ top: '280px' }); }); }); }); }); }); }); } }); }); }); }); });img { border: 1px solid #00f; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <img src="circle.gif" id="circle"style="position:absolute;top:100px;left:450px;display:none;height:150px;width:100px" /> <img src="v_logo.gif" id="v_logo"style="position:absolute;top:340px;left:495px;opacity:0;height:2px;width:2px" /> <img src="s_logo.gif" id="s_logo"style="position:absolute;top:340px;left:520px;opacity:0;height:2px;width:2px" /> <img src="v.gif" id="v"style="position:absolute;top:300px;left:20px;height:120px;width:120px;opacity:0" /> <img src="s.gif" id="s"style="position:absolute;top:100px;left:260px;height:100px;width:100px;opacity:0" /> <img src="t.gif" id="t"style="position:absolute;top:550px;left:350px;height:120px;width:120px;opacity:0" /> <img src="u.gif" id="u"style="position:absolute;top:100px;left:460px;height:120px;width:120px;opacity:0" /> <img src="d.gif" id="d"style="position:absolute;top:550px;left:600px;height:120px;width:120px;opacity:0" /> <img src="y.gif" id="y"style="position:absolute;top:260px;left:970px;height:120px;width:120px;opacity:0" />
Comments
Post a Comment