Остановка и перезапуск анимации при наведении курсора в jQuery

Question

Я пытаюсь создать анимированную кнопку, используя jQuery, которая должна останавливаться при наведении курсора, а затем перезапускаться, когда он не завис.

Для анимации я использую цикл, который выглядит следующим образом:

$(document).ready(function test() {
        $('#box').animate({opacity:0.5}, {duration:750})
        .animate({opacity:1}, {duration:1500})
        .animate({opacity:0.5}, {duration:750, complete: test})
        ;
    });

И я попытался добавить hover с помощью .stop (), но тогда я не знаю, как перезапустить анимацию.У вас есть какие-либо предложения?

Кроме того, у меня есть небольшой пример этого здесь: http://jsfiddle.net/fTpZZ/

Answer 1

обработчик события hover () может обрабатывать методы handlerIn и handlerOut в качестве первого и второго аргументов соответственно.

hover (handlerIn (eventObject), handlerOut (eventObject))

Создайте 2 отдельные функции - одну для состояния «включено» и одну для «выключено»

.hover () - jQuery API

Answer 2

Рабочий раствор: (http://jsfiddle.net/fTpZZ/50/)

$(document).ready(function()
    {
        $('#box').hover(function() {                   
            $('#box').stop();
            $('#box').animate({opacity:0},1);
        });

        function foo()
        {
            $('#box').animate({opacity:0.5}, 750, function(){
                $('#box').animate({opacity:1}, 1500, function(){
                    $('#box').animate({opacity:0.5}, 750, foo());    
                });
            });             
        }

        foo();          
    });