javascript - how to make effects happen one after another -


hi want make these events 1 after another. means when 1st event ends events occur. unable so. 2nd image appears after first event starts animating please me. code

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style>  </style> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>‌​ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>‌​ <script> $(document).ready(function(){ $("#pin01").animate({left: '650px'});  $("#pin01").promise().done(function(x){ $("#pin02").animate({left: '350px'}); }); }); </script> </head> <body>  <img src="mission.gif" id="pin01" style=" position:absolute;top:300px;left:300px;transition:5s"/> <img src="mission.gif" id="pin02" style=" position:absolute;top:300px;left:900px;transition:5s"/> </body> </html> 

the animate functions has own callback function. use this:

$("#pin01").animate({left: '650px'}, 500, function() {     $("#pin02").animate({left: '350px'}); }); 

the 500, delay, after completion of first animation, can set 0 if not want delay. , delay given in ms (milliseconds).


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -