Search code examples
javascriptjqueryhoverjquery-hover

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

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/

Solution

  • 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)});
});