3

案例：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 代码：

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

1 回答 1

15

虽然这已经一岁了，但总是值得回答，在您的示例中，您正在停止元素#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()出现在查找之后。这意味着您要停止此元素上的动画，而不是停止没有动画运行的父元素。

于 2011-07-20T09:02:02.727 回答