Question

I’m trying to create a navigation that uses hover to move the navigation buttons up and down which works. When I click to select a button I want the hover to stop, which works. How do I bind the hover animation back when I select another button in the navigation? As of now, it stays unbounded and all the buttons become unbounded when clicked. A foreach()?

It’s been awhile since I have used jQuery and need a little help.

Also, I was using mouseOver() and mouseOut() first and read that hover was better to use. Is this correct?

Got the fiddle to run correctly which gives you a better idea without the use of images.
http://jsfiddle.net/cs_what/WP9TT/

Answer 1

Event delegation can make this easy.

google.load("jquery", "1.6.2");
google.setOnLoadCallback(function(){
    $(".horzNavigation").delegate("ul > li > a:not(.active)",{
        "mouseenter": function(){
            $(this).stop(true,true).animate({"top": "-=60px"}, 250, 'swing');
        },
        "mouseleave": function(){
            $(this).stop(true,true).animate({"top": "+=60px"}, 250, 'swing');
        }
    }).delegate("ul > li > a","click",function(event){
        $(this).addClass('active').parent().siblings().children('.active').removeClass('active');
    });
});

Also, I assumed you have a typo in your code, ul elements can’t directly contain anchor tags, so I added in the li tag to the selector. Invalid html can have inconsistent results in different browsers.