Working with jQuery Effects

Besides making working with the DOM easier, it also makes it easy to create some simple visual effects. jQuery effects are built-in methods that allow you to animate, show, hide, or transition elements in a webpage.

When used correctly, jQuery effects can:

• Draw user attention to important elements.
• Provide feedback to user interactions.
• Improve navigation and usability.
• Give visual cues for progress or changes.
• Create a smoother and more engaging experience.

Therefore, it is important to focus on effects that improve user experience and interaction, not just use them for animation for decoration.

Basic jQuery Effects

The most basic of these effects are hide() and show(). Using these methods will simply hide an element or make it appear. Maybe hiding unnecessary information, or allowing someone to see additional information. Consider the following HTML, where some users might want to hide the metadata.

        <main>
            <article id="art-id-32">
                <header>
                    <h2>Lorem ipsum</h2>
                    <section class="meta-data">
                        <p>By: Walter Wimberly</p>
                        <p>Published: June 6, 2032</p>
                    </section>
                    <button id="hide-art-32-meta">Hide Stuff</button>
                </header>
                blah...blah...blah...
            </article>
        </main>

We can use the button to hide the things we don’t want to see.

            $(document).ready(function() {
                $('#hide-art-32-meta').on('click', function() {
                    $('#art-id-32 .meta-data').hide();
                });
            });

Of course, this isn’t perfect. For example, we have no way to get it back, and the button saying to “Hide Stuff” is still visible. (easy enough to hide as well) We could hide the “hide” button, and then “show” a button which would allow us to see the metadata if we wanted… but there is another way.

We can use the toggle() button, which will hide data if visible, and show it if it is hidden. With a quick change in the code, we can update this, as well as letting the button text be updated.

    $('#hide-art-32-meta').on('click', function() {
        // toggle the visibility of the element
        $('#art-id-32 .meta-data').toggle();
        // update the button's text
        if($(this).text() == "Hide Stuff") {
            $(this).text("Show Stuff");
        } else {
            $(this).text("Hide Stuff");
        }
    });

Subtler Effects To Display/Hide Info

show() and hide() can be jarring effects as they occur right away. However, there are fadeIn() and fadeOut() methods which will allow you to reveal/hide elements, but they come in and out over time.

Consider the following HTML code where you have additional information you want to share.

<section class="hoverBox">
    <p>Normal stuff...</p>
    <aside class="details" style="display: none;">Some additional information that is only visible when the box is hovered over.</aside>
</section>

With this code, we can make the aside appear and disappear over a little bit of time.

$(".hoverBox").hover(function() {
    $(this).find(".details").fadeIn();
}, function() {
    $(this).find(".details").fadeOut();
});

Notice that we use $(this).find(). This searches for a child element under our selected element, which is much faster and easier to work with compared to trying to find a specific element in a huge page of content. It also makes updating unnecessary, or at least easier, if the content layout changes, and means we can apply the same code to many elements based upon the selector, not just one specific element.

These two methods have two optional parameters. The first is duration, which can speed up or slow down the effect. The duration is measured in milliseconds, with 400 being the default value. A second optional parameter is to pass a function to execute once the effect is complete. These are often not used, as the defaults work well for most situations.

Scrolling to a Section

With the return of the one page website, we often see sites that smoothly scroll from one section to the next by utilizing a JavaScript library like jQuery. Here is how you would do it.

$("a.scrollToSection").click(function(e) {
    e.preventDefault(); // prevent the default behavior of jumping to a section on the page
    let target = $(this).attr("href"); // define the target location to move to
    $("html, body").animate({
        scrollTop: $(target).offset().top // scroll to the target that was defined.
    }, 800); // how long it will take to move there.
});

Best Practices for Using jQuery Effects

There are some things you want to consider when you build jQuery effects. Here are some common things to look out for.

• Performance Considerations: Avoid using too many effects, as they can slow down your site, especially on mobile devices. Keep animations smooth and avoid overloading the page with simultaneous effects.
• Subtlety Over Flashiness: Effects should guide the user, not distract them. Subtle transitions, fades, and animations should be used to provide visual feedback or context.
• Accessibility: Ensure animations are not too fast or distracting for users with visual or cognitive impairments. Keep in mind that some users may prefer reduced motion (consider supporting the prefers-reduced-motion media query).

Working with jQuery Effects was originally found on Access 2 Learn