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

我尝试使用 .stop() 添加悬停，但是我不知道如何重新启动动画。你有什么建议吗？

另外，我在这里有一个小例子：http://jsfiddle.net/fTpZZ/

Answer 1

hover() 事件处理程序可以将 handlerIn 和 handlerOut 方法分别作为第一个和第二个参数处理。

悬停(handlerIn(eventObject), handlerOut(eventObject))

创建 2 个单独的函数——一个用于“on”状态，一个用于“off”

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