jQuery and JavaScript Phrasebook

Animating toggle()

Click here to view code image

if ($("#handle").html() == '+'){   $("#photo").show(1000, function(){     $("#footer").toggle();});   $("#handle").html('-'); } else {   $("#footer").toggle();   $("#photo").hide(1000);   $("#handle").html('+'); }

The .toggle( [duration] [, easing] [, callback]) method provides the optional duration, easing, and callback options, allowing you to animate the toggle between the show and hide effect.

For example, the following code applies an animation of 1 second with linear easing and executes a simple callback function when toggling an element between hidden and shown:

Click here to view code image

$("#switch").show(1000, "linear", function() {   $("#label").html("Switch Toggled!") });