jquery - jQuery: 无限fadeOut $fadeIn 效果？

Question

我想使用fadeOut和fadeIn效果为标签设置动画。但是该代码冻结了浏览器。如何解决？

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

Answer 1

更新（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'));

Answer 2

你也可以使用setInterval方法：

这是jsFiddle。

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