Question

I have weird problem with this code

    $('img').hover(function(){
        var $cap = $(this).parent().find('.cap');
        window.setTimeout(function(){$cap.stop(true,false).animate({bottom:164},500)},500);
    },function(){
        var $cap = $(this).parent().find('.cap');
        window.setTimeout(function(){$cap.stop(true,false).animate({bottom:0},500)},500);
    })

I can’t figure out why effect keeps running up and down and wont stop. I have tried stop() with various parameters. And clearQueue(). But nothing seems to help.

Basic idea is when mouse hovers image slides up caption. And stays until mouse is completely off image, then slides down.

Any ideas what I’m doing wrong?

Live example http://jsfiddle.net/zSAYZ/

P.S. with latest Chrome on Mac caption don’t slides down if mouse stays still. Whit latest Firefox caption goes just op and down until mouse is hover image.

Answer 1

I think this happens because when the caption is up you are not hovering over the image but over the caption. So the caption goes down, then you are hovering over the image, so the caption goes up, then you are hovering on the caption (not the image), so the caption goes down, etc… you get the idea.

This works better (it pauses when the caption meets the mouse, but it works otherwise). You may be able to improve it.

http://jsfiddle.net/x5UAH/4/

$(document).ready(function () {
    $('.contain').hover(
        function(){
            $(this).find('.cap').stop(true,false).animate({bottom:164},500);
        },
        function(){
             $(this).find('.cap').stop(true,false).animate({bottom:0},500);
        }
    );
});