jQuery — Fade

fadeIn()

$("p").fadeIn();
$("p").fadeIn(600);
$("p").fadeIn("slow");
$("p").fadeIn(400, function() {
    console.log("Faded in");
});

fadeOut()

$("p").fadeOut();
$("p").fadeOut(600);
$("p").fadeOut("fast");

fadeToggle()

$("p").fadeToggle(400);
$("p").fadeToggle("slow");

fadeTo()

Animate to a specific opacity:

$("p").fadeTo(400, 0.5);   // 50% opacity
$("p").fadeTo(400, 0.8);   // 80% opacity
$("p").fadeTo(400, 0);     // Fully transparent
$("p").fadeTo(400, 1);     // Fully opaque

Practical Example: Gallery

<div class="gallery">
    <img src="img1.jpg" class="thumb">
    <img src="img2.jpg" class="thumb">
    <img src="img3.jpg" class="thumb">
</div>

<script>
$(".thumb").hover(
    function() { $(this).fadeTo(200, 0.7); },
    function() { $(this).fadeTo(200, 1.0); }
);
</script>

Fade Speed Reference

Speed	Duration
"slow"	600ms
"normal"	400ms
"fast"	200ms
Custom	Any ms value

Mini Practice

1. Fade an element in on page load
2. Fade out an element on button click
3. Use fadeTo to dim an element to 50%
4. Create a hover effect with fade

Up Next

Continue with Slide — sliding elements up and down.