Jquery 如何防止滑动切换功能队列？

案例： Jquery代码管理滑动EM标记（带有slideToggle函数）以使其显示在悬停状态

问题: 滑动切换有时会对悬停状态进行排队。 我提到这篇文章：

我尝试插入stop（）函数，但这不会影响slideToggle（）； 但是这些方法对于动画功能来说是很好的

这是我工作的代码：

Jquery代码：

$(document).ready(function() {
    $('#ProdImg a .priceTag').slideUp();    

    $('#ProdImg a').mouseover(function() {
        $(this).stop().find('.priceTag').slideToggle();
    });

    $('#ProdImg a').mouseout(function() {
        $(this).stop().find('.priceTag').slideToggle();
    });
});

<div id="ProdImg" style=" height:240px;">
    <a title="TEXT" href="TEXT_URL" style="position:absolute; margin-left:10px;">
    <em style="text-align:right; color:#666;" class="priceTag">
        <div class="colorGoldGradient" style="width:100%;">
            <div class="rightGoldGradient" style="width:100%;">
                <div class="leftGoldGradient" style="width:100%;">
                    <div style="padding-left:5px; padding-right:10px;">Prezzo:<br />
                    TEXT
                    </div>
                </div>
            </div>
        </div>
    </em>
    <span class="offertaTag"><span>
    </a>
</div>

HTML代码：

$(document).ready(function() {
    $('#ProdImg a .priceTag').slideUp();    

    $('#ProdImg a').mouseover(function() {
        $(this).stop().find('.priceTag').slideToggle();
    });

    $('#ProdImg a').mouseout(function() {
        $(this).stop().find('.priceTag').slideToggle();
    });
});

<div id="ProdImg" style=" height:240px;">
    <a title="TEXT" href="TEXT_URL" style="position:absolute; margin-left:10px;">
    <em style="text-align:right; color:#666;" class="priceTag">
        <div class="colorGoldGradient" style="width:100%;">
            <div class="rightGoldGradient" style="width:100%;">
                <div class="leftGoldGradient" style="width:100%;">
                    <div style="padding-left:5px; padding-right:10px;">Prezzo:<br />
                    TEXT
                    </div>
                </div>
            </div>
        </div>
    </em>
    <span class="offertaTag"><span>
    </a>
</div>

---

虽然这已经有一年了，但始终值得回答，在您的示例中，您正在停止元素上的动画制作。您想在上停止它。priceTag。为此，您的代码应该是这样的：

$(document).ready(function() {
    $('#ProdImg a .priceTag').slideUp();        

    $('#ProdImg a').mouseover(function(){
        $(this).find('.priceTag').stop().slideToggle();
    }).mouseout(function(){
        $(this).find('.priceTag').stop().slideToggle();
    });
});

---

请注意stop（）位于查找之后。这意味着您正在停止此元素上的动画，而不是没有动画运行的父元素。

您开发的疯狂嵌套布局是什么？？？非常感谢您解释为什么在查找之后必须停止（）。我一直在想为什么我的菜单有时（但不总是）在鼠标移出后保持可见，现在已经有3-4周了。我甚至没有注意到stop（）错误地停止了父级。