悬停父项后停止动画答案

【问题标题】：Stop animation after hovering parent item悬停父项后停止动画
【发布时间】：2014-02-03 08:59:31
【问题描述】：

我使用的是responsive navigation menu，
其中不包含下拉动画。

所以我用这个来做动画//

$(document).ready(function () {
$(".test").hover(function () {
    $(".sub-menu").slideToggle("slow", function () {});
    });
});

现在，当我将鼠标悬停在父项上时，菜单会滑动打开，但一旦我尝试将鼠标悬停在子链接上，菜单就会关闭。

我做了一些研究并尝试在$(".sub-menu") 之后添加.stop()，但它仍然不起作用。

我的问题是，使用.stop()时，为什么悬停后子菜单不打开？

Here is a fiddle.

【问题讨论】：

最简单的答案已被删除，将在此处发布，因为它不是我的$('.test').parent().hover()...。 jsfiddle.net/72qp5/3 就是这样。 ;)
stop() btw 仅用于创建体验，当快速悬停在链接上和离开链接时，定义是否应按顺序将几个“悬停”出队，意味着您远离链接，但它仍然会上下跳动。
@dollarvar 感谢您的解释。我不确定你的意思，所以我删除了.stop() 并测试了菜单，它只是保持动画。就像如果我将链接翻转 4 次，它将打开和关闭 4 次。更换 .stop() 停止。顺便说一句，我不是专业人士，如果我只是简单地重复你所说的话，很抱歉..
不，不客气，在重读我的评论后，我还是想知道。哈哈
@dollarvar 不确定 cmets 是否是正确的询问方式，但我想知道您是否可以帮助我解决有关菜单的另一个小问题 - 移动版。当我在我的电脑上时，调整浏览器的大小并将鼠标悬停在“资源”上，动画不会停止。你知道如何在手机上解决这个问题吗？还是我应该作为一个新问题发布？

标签： jquery animation drop-down-menu slidetoggle

【解决方案1】：

您需要将悬停添加到父 li，因为当您移动到子导航时，a 上的悬停会被释放

HTML

<DIV ID="NXVI">

    <nav>

        <ul class="menu">

            <li><a href="/">FRONT</a></li>

            <li><a href="/about">ABOUT</a></li>

            <li class="contains-sub-menu"><a class="test" href="#">RESOURCES</a>
                <ul class="sub-menu">
                    <li><a href="/overlays">Overlays</a></li>
                    <li><a href="#">Packs</a>
                        <ul class="subb-menu">
                            <li><a href="/overlay-packs">Overlay Packs</a></li>
                            <li><a href="/texture-packs">Texture Packs</a></li>
                        </ul>
                    </li>
                    <li><a href="/pngs">Pngs</a></li>
                    <li><a href="/templates">Templates</a></li>
                    <li><a href="/textures">Textures</a></li>
                    <li><a href="/wallpaper">Wallpaper</a></li>
                </ul>
            </li>

            <li><a href="/credit">CREDIT</a></li>

            <li><a href="/requests">REQUESTS</a></li>

        </ul>

    </nav>

    <a id="touch-menu" class="mobile-menu" href="#">Menu</a>

</DIV>

$(document).ready(function () {
    $(".contains-sub-menu").hover(function () {
        $(".sub-menu").stop().slideToggle("slow", function () {});
    });
});

更新小提琴：http://jsfiddle.net/Varinder/eyN5A/1/

【讨论】：

我在争论使用哪种方法：你的还是 jqueryrocks，然后我意识到你的方法和我的动画脚本非常相似，所以我继续使用你的方法，只是我只是将 LI 切换为一类“测试”继续使用$(".test")，只是在开头添加了li，它最终工作了。 {FIDDLE}。但是后来我向上滚动并阅读了@dollarvar 发布的评论，并决定在$(".test") 之后使用超级简单的.parent() :) 所以即使我使用了另一种更简单的方法，我仍然接受了你的回答。感谢您的帮助。

【解决方案2】：

试试这个，效果很好：


$(document).ready(function () {
    $(".test, .sub-menu").hover(function () {
        $(".sub-menu").stop().slideDown("slow");
    }, function() {
        $(".sub-menu").stop().slideUp("slow");
    });
});

更新的小提琴： http://jsfiddle.net/72qp5/2/

【讨论】：

我使用的是responsive navigation menu，其中不包含下拉动画。

我使用的是responsive navigation menu，
其中不包含下拉动画。