queue a number of effects synchronously with jquery -


is there more readable way queue number of asynchronous effects executed synchronously?

var element1 = $('#div1'); var element2 = $('#div2');  $(element2).hide(); $(element1).on('click',function(){        $(element1).fadeout(1000,function(){         $(element2).fadein(1000, function(){             $(element2).hide();             alert('hello');         });     }); });  

you can prevent ever-deeper nesting effect if use promise-based system.

$.when(     $(element1).fadeout(1000) ).then(function () {     return $(element2).fadein(1000); }).then(function () {     return $(element2).hide(); }).then(function () {     return $(element1).fadein(1000); }).then(function () {     return $(element1).fadeout(1000); }); 

demo: http://jsfiddle.net/tyhnq/1

you'll notice makes easy change order of animations.

the "trick" $.when() method returns promise object associated first animation, can chain bunch of .then() calls, noting each then() callback should return result of animation.

of course can directly chain animations on same element, e.g. .fadein(100).fadeout(100)...


Comments

Popular posts from this blog

c# - Farseer ContactListener is not working -

Automatically create pages in phpfox -

osx - Copy lines to os x clipboard from vim on remote console -