jQuery & DOM Manipulation

Basic Effects

15 min Lesson 23 of 30

Introduction to jQuery Effects

jQuery provides powerful methods to add visual effects to your web pages. These effects make your website more interactive and engaging for users. In this lesson, we'll explore the fundamental show, hide, and toggle effects.

The show() Method

The show() method displays hidden elements with optional animation duration.

Basic Usage:

<div id="box" style="display: none;">Hello World!</div>
<button id="showBtn">Show Box</button>

<script>
$(document).ready(function() {
    $("#showBtn").click(function() {
        $("#box").show(); // Instant show
    });
});
</script>

With Animation Duration:

// Show with animation
$("#box").show(1000); // 1 second animation
$("#box").show("slow"); // Slow animation
$("#box").show("fast"); // Fast animation

// With callback function
$("#box").show(500, function() {
    alert("Animation complete!");
});

The hide() Method

The hide() method conceals visible elements with optional animation.

Examples:

<button id="hideBtn">Hide Box</button>

<script>
$("#hideBtn").click(function() {
    $("#box").hide(800); // Hide over 800ms
});

// Hide multiple elements
$(".alerts").hide("fast");

// Hide with callback
$("#message").hide(500, function() {
    console.log("Message hidden");
});
</script>

The toggle() Method

The toggle() method switches between showing and hiding elements, making it perfect for interactive interfaces.

Toggle Example:

<div id="content">
    <p>This content can be toggled</p>
</div>
<button id="toggleBtn">Toggle Content</button>

<script>
$(document).ready(function() {
    $("#toggleBtn").click(function() {
        $("#content").toggle(600);
    });
});
</script>

💡 Tip: Duration can be specified in milliseconds (numbers) or using keywords: "slow" (600ms), "fast" (200ms), or custom numbers.

Fade Effects

jQuery provides fade effects that change element opacity during animation.

fadeIn() and fadeOut():

// Fade in hidden element
$("#box").fadeIn(1000);

// Fade out visible element
$("#box").fadeOut(500);

// Fade toggle
$("#box").fadeToggle(800);

// Fade to specific opacity
$("#box").fadeTo(1000, 0.5); // Fade to 50% opacity

Practical Example - Modal Dialog:

<div id="overlay" style="display:none;">
    <div id="modal">
        <h3>Welcome!</h3>
        <p>This is a modal dialog</p>
        <button id="closeModal">Close</button>
    </div>
</div>
<button id="openModal">Open Modal</button>

<script>
$(document).ready(function() {
    // Open modal
    $("#openModal").click(function() {
        $("#overlay").fadeIn(400);
    });

    // Close modal
    $("#closeModal").click(function() {
        $("#overlay").fadeOut(400);
    });
});
</script>

Callback Functions

Callback functions execute after the animation completes, allowing you to chain actions or update the interface.

Using Callbacks:

// Single callback
$("#message").fadeOut(500, function() {
    $(this).remove(); // Remove element after fade
});

// Chained effects
$("#box").fadeOut(300, function() {
    $(this).text("Content Updated").fadeIn(300);
});

// Multiple elements with callback
$(".notification").each(function() {
    $(this).fadeOut(500, function() {
        console.log($(this).attr("id") + " hidden");
    });
});

⚠️ Warning: When animating multiple elements, the callback executes once for each element. Use a counter or check if you need to run code only once after all animations complete.

Stopping Animations

The stop() method halts currently running animations, preventing animation queue buildup.

Stop Method:

// Stop current animation
$("#box").stop();

// Stop and clear queue
$("#box").stop(true);

// Stop and jump to end
$("#box").stop(true, true);

// Practical use - prevent hover spam
$("#box").hover(
    function() {
        $(this).stop().fadeIn(300);
    },
    function() {
        $(this).stop().fadeOut(300);
    }
);

Practical Example: Image Gallery

<style>
.gallery-item {
    display: inline-block;
    margin: 10px;
    cursor: pointer;
}
.gallery-item img {
    width: 200px;
    height: 150px;
    object-fit: cover;
}
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
}
.overlay img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
}
</style>

<div class="gallery">
    <div class="gallery-item">
        <img src="photo1.jpg" alt="Photo 1">
    </div>
    <div class="gallery-item">
        <img src="photo2.jpg" alt="Photo 2">
    </div>
</div>

<div class="overlay">
    <img id="lightbox-img" src="" alt="">
</div>

<script>
$(document).ready(function() {
    // Open lightbox
    $(".gallery-item img").click(function() {
        var imgSrc = $(this).attr("src");
        $("#lightbox-img").attr("src", imgSrc);
        $(".overlay").fadeIn(400);
    });

    // Close lightbox
    $(".overlay").click(function() {
        $(this).fadeOut(400);
    });
});
</script>

📝 Exercise: Notification System

Task: Create a notification system that:

Shows a notification message when a button is clicked
Fades in the notification over 500ms
Automatically fades out after 3 seconds
Has a close button to dismiss it immediately
Supports multiple notifications stacking vertically

Bonus Challenge: Add different notification types (success, warning, error) with different colors and icons.

Summary

show(), hide(), toggle() - Basic visibility control
fadeIn(), fadeOut(), fadeToggle() - Opacity animations
fadeTo() - Animate to specific opacity
Callback functions execute after animation completes
stop() prevents animation queue buildup
Duration: numbers (ms), "slow" (600ms), "fast" (200ms)