Question

案例： Jquery代码管理滑动EM标签（带有slideToggle功能），以便在悬停时显示。

问题： slideToggle有时会将悬停状态排队。我提到了这篇文章： http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

我试图插入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();
    });
});

HTML code：

<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>

Answer 1

虽然现在已经有一年了，但总是值得回答，在你的例子中，你要停止 #ProdImg a 元素上的动画。你想在 .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（）。这意味着您要停止此元素上的动画，而不是没有动画运行的父元素。

如何防止SlideToggle功能队列？

1 个答案: