Coding on the Can

Want to execute some code, but only after an animation has finished? Try using a callback.

This could be useful, for example, for fading an item by animating its opacity then removing it from the page, or for running a conditional statement based on an element's properties after it is done animating instead of when the animation is called; the list goes on.

The pseudocode looks like this:

$(selector).animate({something}, function(){   if($(selector).property=value){     then do something   }; });

The section in bold is the callback, and is is only executed when the animation is finished.

Using list items for a dropdown menu? Want to slightly change the appearance of every other item in the list to easily differentiate them? CSS to the rescue!

Try using the 'nth-child(odd)' selector:

Consider the following code for a rollover-triggered animation using jQuery:

$(".roll").mouseover(function(){ $(this).animate({width:"+=200px"}); });  $(".roll").mouseout(function(){ $(this).animate({width:"-=200px"}); });  

If the content in question is rolled over several times, the animations queue up and continue to play long after the cursor has moved on... prevent this happening by using .stop()

$(".roll").mouseover(function(){ $(this).stop(true, false).animate({width:"+=200px"}); });  $(".roll").mouseout(function(){ $(this).stop(true, false).animate({width:"-=200px"}); });