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

これは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()があることに注意してください。つまり、アニメーションが実行されていない親要素ではなく、この要素のアニメーションを停止しています。

于 2011-07-20T09:02:02.727 に答える