JQuery при наведении анимации продолжает работать.Варианты Stop () не помогают - PullRequest
Новая
       18

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

1 голос
/ 04 декабря 2011

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

    $('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 вы можете просто опускаться и опускаться, пока мышь не наведет курсор на изображение.

1 Ответ

1 голос
/ 04 декабря 2011

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

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

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