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

SPSS keyboard combination alters encoding -

Socket.connect doesn't throw exception in Android -

iphone - How do I keep MDScrollView from truncating my row headers and making my cells look bad? -