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
Post a Comment