javascript - JQuery - Why is JQuery animation simultaneous? -
<!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#a").hide(1000); $("#b").hide(1000); $("#c").hide(1000); }); </script> </head> <body> <p id="a">paragraph 1</p> <p id="b">paragraph 2</p> <p id="c">paragraph 3</p> </body> </html> javascript single threaded, think functions executed 1 one. in sample above, seems 3 paragraphs start hide animation simultaneously , ended @ same time, if there 3 threads each running 1 distinct animation. why animations not run 1 one ?
there not simultaneous. starting animation not block execution of code. start 1 after others run "almost" simultaneously. jquery animations in fact similar setinterval, update opacity each x milliseconds. between x ms code running. , animations starting between small amount of time.
if don't want them simultaneous should start them in callback of previous one.
here code make them run 1 after other :
$(".a").hide(1000, function() { $(".b").hide(1000, function() { .... if want use async library make code cleaner (it dirty 10 elements) can use async https://github.com/caolan/async
async.eachseries([$(".a"), $(".b"), $(".c")], function(elem, callback) { elem.hide(1000, callback); }); 
Comments
Post a Comment