Анимация jQuery при наведении продолжает работать. Варианты Stop() не помогают

У меня странная проблема с этим кодом

    $('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);
    })

Я не могу понять, почему эффект продолжает работать вверх и вниз и не останавливается. Я пробовал stop() с разными параметрами. И clearQueue(). Но вроде ничего не помогает.

Основная идея заключается в том, что при наведении курсора мыши изображение скользит вверх по заголовку. И остается до тех пор, пока мышь полностью не выйдет за пределы изображения, а затем скользит вниз.

Любые идеи, что я делаю неправильно?

Живой пример http://jsfiddle.net/zSAYZ/

P.S. с последней версией Chrome на Mac заголовок не скользит вниз, если мышь остается неподвижной. В последней версии Firefox заголовок идет просто вверх и вниз, пока мышь не наведет изображение.


jquery jquery-animate jquery-hover
person lfx    schedule 03.12.2011    source источник
comment
Я считаю, что как только заголовок поднимается, наведение теряется, и вызывается вторая функция ( mouseleave ).   -  person czarchaic    schedule 04.12.2011

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, это происходит потому, что когда подпись вверху, вы наводите курсор не на изображение, а на подпись. Итак, подпись опускается, затем вы наводите курсор на изображение, поэтому подпись поднимается, затем вы наводите курсор на подпись (а не на изображение), так что подпись опускается и т. д., вы поняли.

Это работает лучше (приостанавливается, когда заголовок встречается с мышью, но работает иначе). Возможно, вы сможете улучшить его.

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);
        }
    );
});
person semaz    schedule 03.12.2011