Stopping jQuery from doing its thing?

Question

I have this code.

$(document).ready(function() {
$('#box').hide();
$(window).bind('scroll', function(){
    if($(this).scrollTop() > 200) {
        $("#box").fadeIn(300);
    }
    else {
    $("#box").fadeOut(300);
    }
});
});

So when I scroll down 200px it will make a div appear. When I scroll back up, it will disappear. This is fine, until I do it a lot.

If I scroll up and down like a nutter the div keeps fading in and out even after I stop. This isn't related to just this instance, it's happened a lot in the past and I've always wanted to know how to fix it (by making it stop as soon as I have, without doing it for everytime I scrolled up and down).

Is that possible?

Answer 1

Use the stop^docs function

You simply need to call $('#box').stop(true,true).fadeIn(300); and $('#box').stop(true,true).fadeOut(300); respectively

Answer 2

Try using stop() before more animations are queued:

$(document).ready(function() {
    $('#box').hide();
    $(window).bind('scroll', function(){
        if($(this).scrollTop() > 200) {
            $("#box").stop().fadeIn(300);
        }
        else {
            $("#box").stop().fadeOut(300);
        }
    });
});

See the documentation here: http://api.jquery.com/stop/

Answer 3

You have to add stop function to your queue like this: $('#box').stop(true).fadeOut(300);

function stop() description: see here

Answer 4

.clearQueue() worked much better than .stop()

Answer 5

jQuery has a stop() method - http://api.jquery.com/stop/

This article describes how to use it, seems to be exactly what you're looking for: http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup