带有slideUp/Down和clearQueue的jQuery问题

jQuery issue with slideUp/Down and clearQueue

本文关键字：jQuery 问题 clearQueue slideUp Down 带有      更新时间：2023-09-26

当使用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);
    }
});

我最初没有包含clearQueues（）这一行，但如果用户不稳定地在#元素上方和外部悬停，这会导致slideUp/Down排队并动画化很长一段时间。

添加该行意味着，如果用户快速悬停并退出，则下拉列表不会完全显示。

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

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

我在使用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);
    }
});
相关文章：