How to prevent SlideToggle function queue?

Question

Case: Jquery code manage a sliding EM tag (with slideToggle function) for its appearing on hover.

Problem: The slideToggle sometimes queue the hover state. I referred to this article: http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

I tried to insert stop() function, but this not affect slideToggle(); But the methods it'going good for animate function.

This is the code where i working on:

Jquery Code:

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

Although this is a year old now, it's always worth answering, in your example you are stopping the animation on the element #ProdImg a. You want to be stopping it on .priceTag. To do this your code should like so:

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

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

Notice the stop() comes after the find. Meaning you are stopping the animation on this element not the parent element which has no animation running.