How to stop jQuery queuing animation effects

Question

I have a simple jQuery hover animation:

jQuery(function($) {
$('.category').hover(function(){
    $(this).find('.banner').fadeIn();
    },function(){
    $(this).find('.banner').fadeOut(400);
});
});

all this does is when someone hovers over the .category element, the banner div fades in and fades out. Simple.

My problem is that as I have about ten of the .category elements, if someone moves across them too fast or off and on the same one multiple times jQuery queues the animations and keeps making them appear, disappear until it's caught up.

Is there a simple way to stop this from happening?

I saw another question where it was suggested to add .stop, but this doesn't work. the animation stops working completely or comes in only half faded in if I move the mouse over and off too many times.

Thanks in advance

Answer 1

You can convert your fadeOut and fadeIn to use .animate() with options to stop animation queuing.

$('.category').hover(function() {
    $(this).find('.banner').show().animate({
        opacity: "show"
    }, {
        queue: false
    });
}, function() {
    $(this).find('.banner').animate({
        opacity: "hide"
    }, {
        queue: false,
        duration: 400
    });
});

Code example on jsfiddle

Answer 2

When I implemented the top answer, my vertical scroll animation just jittered back and forth..

This was helpful - W3 Schools Set Interval, syntax:

setInterval(function, milliseconds, param1, param2, ...)

Having my parameters of the form { duration: 200, queue: false } forced a duration of zero and it only looked at the parameters for guidance.

This worked for me:

var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;

function configureRepeats() {
   window.setInterval(function () {
       autoScroll($scrollDiv, $scrollSpeed);
   }, $interval, { queue: false });
};

Where 'autoScroll' is:

    $($scrollDiv).animate({
        scrollTop: $($scrollDiv).get(0).scrollHeight
    }, { duration: $scrollSpeed });

    //Scroll to top immediately 
    $($scrollDiv).animate({
        scrollTop: 0
    }, 0);

Happy coding!

Also refer my original comment on this post: How to run two jQuery animations simultaneously?