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方法执行此操作：

Here is jsFiddle.

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