How to stop animation in jQuery

Question

I want to stop animation of showing 'black header'.

If you scroll couple of times fast you'll notice that animation is triggered and the black header will "flash"

$(window).scroll(function() {
    if ($(window).scrollTop() > 200) {  
        $(".prim").fadeIn(250);
    }
    else {
        $(".prim").fadeOut(250);
    }
});

//Sticky bar responsive fix
$(window).resize(function(){
    var width = $(window).width();

    if( width > 1024 && $(window).scrollTop() > 190 ){
        $(".prim").fadeIn(250);
    }
    else{
        $(".prim").css('display', 'none');
    }

});

http://jsfiddle.net/zlajaa1/fbe4p283/1/

Here is another article explaining how to stop jQuery animation: http://stackoverflow.com/questions/3701311/jquery-event-when-user-stops-scrolling. Write some code surrounding one of these ideas to create the functionality you are looking for. — puddinman13, Feb 26 '15 at 16:49

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

You can use the stop() method. The method accepts 2 parameters.

From the Jquery docs:

clearQueue Type: Boolean A Boolean indicating whether to remove queued animation as well. Defaults to false.

jumpToEnd Type: Boolean A Boolean indicating whether to complete the current animation immediately. Defaults to false.

jsfiddle demo

$(window).scroll(function() {
    if ($(window).scrollTop() > 200) {  
        $(".prim").fadeIn(250);
    }
    else {
        $(".prim").stop( true, true ).fadeOut(250);
    }
});

//Sticky bar responsive fix
$(window).resize(function(){
    var width = $(window).width();

    if( width > 1024 && $(window).scrollTop() > 190 ){
        $(".prim").fadeIn(250);
    }
    else{
        $(".prim").css('display', 'none');
    }
    
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 26 '15 at 16:43

kasper Taeymans

6,950
5
32
51

That is a good plan, but it no longer fades in. – puddinman13 Feb 26 '15 at 16:47
edited my answer. It was not good to stop the fadeIn as well. – kasper Taeymans Feb 26 '15 at 16:51
Here is another idea using a boolean, but I like yours better now @kasperTaeymans. http://jsfiddle.net/puddinman13/Lgqvfsub/ – puddinman13 Feb 26 '15 at 16:53
OK this is good enough, any idea how to organize this to remain as fade animation? – Zlatko Vujicic Feb 26 '15 at 16:58
It is a fade animation, right? If you have an other question you can ask a new one. It's not good to ask new questions in the comments. – kasper Taeymans Feb 26 '15 at 17:04
YEah , the solution to stop is good but new fiddle provide me with fade and no stop animation hehehe, it's not a new question ;) – Zlatko Vujicic Feb 26 '15 at 17:16
I see... you get the fade in and not the fade out. Try changing this line:$(".prim").stop( true, true ).fadeOut(250); to: $(".prim").stop( true, false ).fadeOut(1000); Notice false as the second parameter. – puddinman13 Feb 26 '15 at 18:43

How to stop animation in jQuery

1 Answers1