文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery:无限的fadeOut $ fadeIn效果？

问jQuery:无限的fadeOut $ fadeIn效果？
EN

Stack Overflow用户

提问于 2012-08-02 21:02:09

回答 2查看 3K关注 0票数 0

我想使用fadeOut和fadeIn效果来设置标签的动画效果。但是这些代码会冻结浏览器。如何解决这个问题？

function animateLabels() {
   $('label.orange-font').fadeOut(1000,function(){ $(this).fadeIn(1000,function(){ animateLabels(); }});
}

jquery

回答 2

Stack Overflow用户

发布于 2012-08-02 21:14:25

更新(jsFiddle)

好吧，我有点无聊了，所以我为jQuery做了一个插件，哈哈。它本质上是pulsate效应，但有一些额外的选择。

(function($) {
    $.fn.pulsate = function(options) {
        var defaults = {
            fadeIn: 1000,
            fadeInDelay: 150,
            fadeOut: 1000,
            fadeOutDelay: 150            
        };

        var settings = $.extend({}, defaults, options);

        function fadeOutIn(element) {
            $(element || this).delay(settings.fadeOutDelay)
                .fadeOut(settings.fadeOut)
                .delay(settings.fadeInDelay)
                .fadeIn(settings.fadeIn, fadeOutIn);
        }           

        return this.each(function() {
           fadeOutIn(this); 
        });
    };    
})(jQuery);

然后像这样跳动：

$('label.orange-font').pulsate();

// or with options
$('label.orange-font').pulsate({
    fadeIn: 500,
    fadeOut: 2000
});

原始(jsFiddle)

或者，您可以尝试使用delay方法，如下所示

function pulsate(element) {
    $(element || this).delay(150).fadeOut(1000).delay(150).fadeIn(1000, pulsate); 
}

然后像这样跳动：

pulsate($('label.orange-font'));

票数 4

Stack Overflow用户

发布于 2012-08-02 21:25:41

你也可以用setInterval方法来实现：

Here is jsFiddle.

function myRepeat() {
    $('div').delay(150).fadeOut(1000).delay(150).fadeIn(1000); 
}
setInterval(myRepeat,500);

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11777997

复制

相似问题

问jQuery:无限的fadeOut $ fadeIn效果？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery:无限的fadeOut $ fadeIn效果？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery:无限的fadeOut $ fadeIn效果？
EN