jQuery chaining animations
home
Run
screen_rotation
fullscreen
cloud_download
<!DOCTYPE html> <html> <head> <title>Slide Toggle- jQuery Example</title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#animateButton").click(function(){ $('#t1, #t2, #t3').css({opacity:1, position:'relative'}); $("#t1").animate({backgroundColor:'gray'},1000, function(){ $("#t2").animate({backgroundColor:'yellow'},1000, function(){ $("#t3").animate({backgroundColor:'red'},1000, function(){ }); }); }); }); }); </script> </head> <body> <a href="javascript:void(0)" id="animateButton"> Start Chaning Animations </a><br> <br> <div id="t1">First Div</div> <div id="t2">Second Div</div> <div id="t3">Third Div</div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Slide Toggle- jQuery Example</title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#animateButton").click(function(){ $('#t1, #t2, #t3').css({opacity:1, position:'relative'}); $("#t1").animate({backgroundColor:'gray'},1000, function(){ $("#t2").animate({backgroundColor:'yellow'},1000, function(){ $("#t3").animate({backgroundColor:'red'},1000, function(){ }); }); }); }); }); </script> </head> <body> <a href="javascript:void(0)" id="animateButton"> Start Chaning Animations </a><br> <br> <div id="t1">First Div</div> <div id="t2">Second Div</div> <div id="t3">Third Div</div> </body> </html>
Copyrights@tutorialsplane.com