Jquery dropdown supprimer la classe après disparaît

Question

J'ai ce code pour une liste déroulante et j'ai besoin de supprimer la classe 'hovered' sur '#products' après que le menu glisse et a disparu. Comment puis-je faire cela? Actuellement, il disparaît immédiatement surmouseout

Merci pour toute aide pour résoudre ce problème! :-)

$(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

Vous pouvez appeler .removeClass() dans le rappel .animate(), comme ceci:

$(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

Vous pourriez probablement mettre

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

comme le rappel de la fonction animate()

Answer 3

Si je vous comprends bien, il semble que vous venez de besoin de faire usage de la fonction de rappel de .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'); 
     }); 
    }); 
});