How to stop the incompleted animation while mouse out and then mouse in again in .hover()?

Question

I am trying to use .hover() to hide and show the options while user mouse in the image.

Here is my JS code:

$(document).ready(function(){
$('#test').hover(
    function(){
        $('.caption').show('slide', {direction: 'left'}, 1200);
    },
    function(){
        $('.caption').hide(1200)});});

Right now the animation works, but if I mouse enter and mouse out multiple times quickly, the speed of the repetition of the tag cannot catch up with the mouse. And I want while I hover again, the incomplete animation could pause what its doing and execute the present calling.

I tried to add a .stop() but then the function could not repeat while I mouse in again anymore

Does anyone know how to do it, thanks.

Here is the JSFiddle: http://jsfiddle.net/x69chen/aznEa/2/

Answer 1

use stop(true,true) in Jquery.We can use create a nice slide effect without the common problem of multiple queued animations by adding .stop(true, true) to the chain:

$(document).ready(function(){

    $('#test').hover(
        function(){
            $('.caption').stop(true,true).show('slide', {direction: 'left'}, 1200);
        },
        function(){
            $('.caption').stop(true,true).hide(100)});
});

Answer 2

Use $('.caption').clearQueue() on mouse out.

This will clear the current animation under process

Refer :http://api.jquery.com/clearQueue/

Answer 3

// try this

$(document).ready(function(){
$('#test').hover(
    function(){
        $('.caption').show('slide', {direction: 'left'}, 1200);
    });

$('#test').mouseout(function(){
    $('.caption').stop().show('slide', {direction: 'left'}, 1200);
        $('.caption').hide(100);
});
});

see js fiddle at http://jsfiddle.net/x69chen/aznEa/2/