Jquery dropdown remove class after disappears

Question

I have this code for a dropdown and I need to remove the class 'hovered' on '#products' after the menu slides up and has disappeared. How do I do this? Currently it disappears straight away onmouseout

Thanksfor any help in resolving this! :-)

$(function() {
    var divTop = 168;
    $('#products div ul').css({'margin-top': '-' + divTop + 'px','float':'left'});

    $('#products > a,#products div').hover(function(){
        $('#products').addClass('hovered');
        $('#products div ul').show().stop().animate({'margin-top': '0'});
    },function(){
        $('#products').removeClass('hovered');
        $('#products div ul').show().stop().animate({'margin-top': '-' + divTop + 'px'});
    });
});

Answer 1

You can call .removeClass() in the .animate() callback, like this:

$(function() {
    var divTop = 168;
    $('#products div ul').css({'margin-top': '-' + divTop + 'px','float':'left'});

    $('#products > a,#products div').hover(function(){
        $('#products').addClass('hovered');
        $('#products div ul').show().stop().animate({'margin-top': '0'});
    },function(){            
        $('#products div ul').show().stop().animate({'margin-top': '-' + divTop + 'px'}, function() {
          $('#products').removeClass('hovered');
        });
    });
});

Answer 2

You could probably put

function(){
$('#products').removeClass('hovered');
}

as the callback of the animate() function

Answer 3

If I understand you properly, it seems like you just need to make use of the callback function of .animate() (REF: http://api.jquery.com/animate/).

$(function() {
    var divTop = 168;
    $('#products div ul').css({'margin-top': '-' + divTop + 'px','float':'left'});

    $('#products > a,#products div').hover(function(){
        $('#products').addClass('hovered');
        $('#products div ul').show().stop().animate({'margin-top': '0'});
    },function(){
        $('#products div ul').show().stop().animate({'margin-top': '-' + divTop + 'px'}, function(){
            $('#products').removeClass('hovered');
        });
    });
});