jQuery Effects and Animations

Creating animations and effects

Show and Hide

$('div').show(); # show element
$('div').hide(); # hide element
$('div').toggle(); # toggle visibility

Fade Effects

$('div').fadeIn(); # fade in
$('div').fadeOut(); # fade out
$('div').fadeToggle(); # toggle fade
$('div').fadeTo(500, 0.5); # fade to opacity

Slide Effects

$('div').slideDown(); # slide down
$('div').slideUp(); # slide up
$('div').slideToggle(); # toggle slide

Custom Animation

$('div').animate({ # custom animation
    left: '250px',
    opacity: 0.5,
    width: '300px'
}, 1000); # duration in ms

Animation Control

$('div').stop(); # stop animation
$('div').delay(1000); # delay animation

Callback

$('div').fadeOut(500, function() { # callback after animation
    alert('Animation complete');
});