在 jQuery 中悬停时停止并重新启动动画

发布于 2024-10-22 00:21:14 字数 485 浏览 7 评论 0 原文

我正在尝试使用 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/

原文

I'm trying to create an animated button using jQuery that should stop on hover and then restart when it's not hovered.

For the animation I'm using a loop that looks like this:

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

And I tried adding a hover with a .stop() but, then I don't know how to restart the animation. Do you have any suggestions?

Also, I have a little example of this here: http://jsfiddle.net/fTpZZ/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

幽蝶幻影 2024-10-29 00:21:14

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

hide( handlerIn(eventObject), handlerOut(eventObject) )

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

.hover() - jQuery API

回复收藏 0 原文

智商已欠费 2024-10-29 00:21:14

工作解决方案：(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();          
    });

Working solution: (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();          
    });

回复收藏 0 原文

~没有更多了~