javascript - jQuery 问题与 slideUp/Down 和 clearQueue

Question

我有一个下拉菜单，当使用 jquery 将鼠标悬停在一个元素上时，它会显示和隐藏(slideUp 和 slideDown)...

$("#element").hover( function() {
    $(this).next().clearQueue();
    $(this).next().slideDown(); //animate({height:300},100);
}, function() {
    if (!$(this).next().is(':hover')) {
        $(this).next().clearQueue();
        $(this).next().slideUp(); //animate({height:0},100);
    }
});

我最初没有包含 clearQueue() 行，但这会导致 slideUp/Down 在用户不规律地悬停在 #element 上和移出时长时间排队和动画。

添加该行意味着如果用户非常快速地悬停，下拉菜单不会完全显示。

我可以通过设置 slideDown 动画来解决这个问题，但问题是我不知道我需要设置动画的确切高度，因为它可以改变。

有没有办法阻止这种行为？

Answer 1

我对 slideUp 和 slideDown 也有类似的问题，其中 slideDown 会在动画期间为我的元素提供静态高度，而元素必须保持动态大小，因为它的内容可能随时更改。我通过在 animationFinished 回调中将 CSS 高度值设置为空字符串(即“”)来解决这个问题。

所以这应该可以解决您的问题:

$("#element").hover(function () {
    $(this).next().stop(true).slideDown(400, function () { // .stop(true) is basically the same as .clearQueue() except that it only stops and clears animations
        $(this).css('height', '');
    }); //animate({height:300},100);
}, function () {
    if (!$(this).next().is(':hover')) {
        $(this).next().stop(true).slideUp(); //animate({height:0},100);
    }
});