Question

所以，我有一个动画下拉菜单，当鼠标悬停在它上面时会向下滑动，然后当它没有时会逐渐消失。很简单。但是如果使用在动画完成向下移动之前移动鼠标，那么它将跳转到队列的末尾，从而暴露整个菜单，然后淡出，或者根据我传递给哪些参数使其变短，从而使菜单变形。停止（）。

我该如何解决这个问题？

EDIT ::

这是我正在谈论的图片：

在： http://img192.imageshack.us/i/beforetc.jpg/

在： http://img682.imageshack.us/i/afterr.jpg/

$('.menu')
    .mouseover( function() {
        var subMenu = [];

        $(this).next().children().each( function() {
            subMenu.push( $(this) );
        });

        slideMenu(subMenu);
    });

$('.menuItem').parent()
    .mouseleave( function() {
        $(this).find('.menuItem').children().stop(true,false).fadeOut(200);
    });

function slideMenu(menu) {
    var subMenu = $.makeArray(menu);

    if ( subMenu.length == 0 )
        return true;
    else {
        var menuItem = subMenu.shift();
        $(menuItem).slideDown(50, function() { slideMenu(subMenu); });
    }
}

<div class='box'>
    <div>
        <div class='menu'>Resources</div>
        <div class='menuItem'>
            <div>Library</div>
            <div>Internet</div>
            <div>Your mom</div>
        </div>
    </div>
</div>

Answer 1

我做了另一个递归方法，检查元素是否已设置动画，然后停止并隐藏它。这里的关键是分离每个子节点，然后使用stop（）的第二个参数跳转到动画队列的末尾。这将使孩子完全可见并向下滑动，以免被截断。在我使用[...].children().each( function() {} )之前，它会跳过影响所有孩子的整个动画队列的末尾。也许这会帮助其他人摆脱困境。

$('.menuItem').parent()
    .mouseleave( function() {
        var subMenu = [];

         $(this).find('.menuItem').children().each( function() {
            subMenu.push( $(this) );
        });

        hideMenu(subMenu);
    });

function hideMenu(menu) {
    var subMenu = $.makeArray(menu);

    if ( subMenu.length == 0 )
        return false;
    else {
        var menuItem = subMenu.shift();
        $(menuItem).is(':animated') ? $(menuItem).stop(false,true).hide() : 
                                      $(menuItem).fadeOut(300);
        hideMenu(subMenu);
    }
}

动画队列的问题导致我的div变形

1 个答案: