jQuery — Effects

hide() and show()

$("p").hide();       // Hide immediately
$("p").show();       // Show immediately

// With duration
$("p").hide(400);    // Hide over 400ms
$("p").show(400);    // Show over 400ms

// With callback
$("p").hide(400, function() {
    console.log("Hidden!");
});

// Toggle visibility
$("p").toggle();

fade effects

$("p").fadeIn();      // Fade in
$("p").fadeOut();     // Fade out
$("p").fadeToggle();  // Toggle fade

// With duration
$("p").fadeIn(600);
$("p").fadeOut(600);

// Fade to specific opacity
$("p").fadeTo(400, 0.5); // Fade to 50% opacity

slide effects

$("p").slideDown();    // Slide down
$("p").slideUp();      // Slide up
$("p").slideToggle();  // Toggle slide

$("p").slideDown(400);
$("p").slideUp(400);

animate()

Custom animations:

$("div").animate({
    left: "250px",
    opacity: 0.5,
    height: "150px",
    width: "150px"
}, 1000);

Queue and Dequeue

$("div")
    .slideUp(300)
    .slideDown(300)
    .fadeOut(300);

stop()

$("div").stop();       // Stop current animation
$("div").stop(true);   // Clear animation queue
$("div").stop(true, true); // Jump to end

Global Effects Toggle

$.fx.off = true;  // Disable all animations

Speed Keywords

Keyword	Milliseconds
"slow"	600
"normal"	400
"fast"	200

Mini Practice

1. Hide and show an element on button click
2. Fade an element in and out
3. Slide an element up and down
4. Create a custom animation with animate()

Up Next

Continue with Hide and Show — more on visibility toggling.