Question

我有这个代码用于下拉菜单，我需要在菜单向上滑动并消失之后删除'#products'上的'hovered'类。我该怎么做呢？目前，它立即消失在onmouseout

感谢您解决此问题的任何帮助！： - ）

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

您可以在.removeClass()回调中致电.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');
        });
    });
});

Answer 2

你可能会把

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

作为animate()函数的回调

Answer 3

如果我理解正确，您似乎只需要使用.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');
        });
    });
});

Jquery下拉列表删除后删除类

3 个答案: