Search code examples
jquerycssmouseout

Mouseout working only once

http://jsfiddle.net/a08fLdte/

This is my example, if you hover over the image, it will slide some text, if you mouseout, after 2 seconds the text will slide back, and if you repeat that, it will slide in, but never slide back. Any idea why?

$(document).ready(function () {
    $('.image').hover(function () {
        $('.person_info').css({
            'left': '0px'
        });
    });
    $('.image').mouseout(function () {
        $(this).delay(2000).queue(function () {
            $('.person_info').css({
                'left': '-165px'
            });
        });
    });
});
Solution

  • You need to add stop(true) to the mouseout so that the queue is cleared before adding the slide left animation:

    $(this).stop(true).delay(2000).queue(function () {
    $('.person_info').css({
        'left': '-165px'
    });
});

    Updated fiddle