Как предотвратить функцию SlideToggle в очереди? - PullRequest
3 голосов
/ 11 сентября 2009

Корпус: Код Jquery управляет скользящим тэгом EM (с функцией slideToggle) для его появления при наведении.

Проблема: SlideToggle иногда ставит в очередь состояние наведения. Я ссылался на эту статью: http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

Я пытался вставить функцию stop (), но это не повлияло на slideToggle (); Но методы хороши для одушевленной функции.

Это код, над которым я работаю:

Код запроса:

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

1 Ответ

14 голосов
/ 20 июля 2011

Хотя этому году уже год, всегда стоит ответить, в вашем примере вы останавливаете анимацию для элемента # 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 () идет после поиска. Это означает, что вы останавливаете анимацию на этом элементе, а не на родительском элементе, на котором анимация не запущена.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...