Sliding elements with jQuery

Note: I've redesigned the site since I wrote this post, so the animated navigation is no longer on the site.

I've just added animated navigation to the carousel on the homepage - the navigation slides in from either side when you hover over the carousel. This is a simple effect to add using jQuery's animate() function.

The basic effect is controlled by animating the width of the element; in jQuery this would look like:

$(document).ready(function() {
    $("#trigger").click(function() {
        $("#slide").animate({width: 'toggle'});
    });
});

...and the result of this code:

For the carousel, instead of having a link to click on, the event is triggered when the mouse hovers over the carousel. The jQuery code can be modified to take this into account:

$(document).ready(function() {
    $("#example2").hover(function() {
        $("#slide2").animate({width: 'toggle'});
    });
});

Obviously, the navigation would be no use if it disappeared when we hover over the carousel, so we need to trigger the animation once the page loads. This will hide the navigation initially, then show it once the user hovers over it:

$(document).ready(function() {
    // slide the div out when the page loads
    $("#slide3").animate({width: 'toggle'});

    // show the div again when the user hovers over
    $("#example3").hover(function() {
        $("#slide3").animate({width: 'toggle'});
    });
});

The navigation could be hidden initially through CSS, but I prefer to have it visible when the page loads so that the user is aware it exists.

Control more than one item with the same trigger

The navigation of the carousel consists of two separate links, both triggered by the same event. The simplest way to control multiple elements at a time is to assign them to a variable, then use the variable in place of the usual jQuery selector syntax.

$(document).ready(function() {
    // set a variable which contains the navigation
    var nav = $(".examplenavigation");

    // slide the navigation out when the page loads
    nav.animate({width: 'toggle'});

    // show the navigation again
    $(".examplecontainer").hover(function() {
        nav.animate({width: 'toggle'});
    });
});