Question

This page is live at http://settlementprep.com/services/

$("#services_nav li a.move ").hover(function(){
        $(this).stop().animate({'padding-bottom':"20px"},{queue:false,duration:200});
    }, function() {
        $(this).stop().animate({'padding-bottom':"0px"},{queue:false,duration:200});
    });

this animates all the navigation items. But I want to have the current li be stuck up and not go back down, but I also don’t want it to slide up while its already up… any ideas?

Answer 1

Just add class ‘active’ to the link that was clicked. And add CSS accordingly. See the sample code below:

var $serviceLinks = $("#services_nav .move");
$serviceLinks.hover(function(){
    if(!$(this).hasClass('active'))
        $(this).stop().animate({'padding-bottom':"20px"},{queue:false,duration:200});
}, function() {
    if(!$(this).hasClass('active'))
        $(this).stop().animate({'padding-bottom':"0px"},{queue:false,duration:200});
});

$serviceLinks.click(function(){

    $serviceLinks.removeClass('active');
    $(this).addClass('active');

}