jquery - jQuery:無限フェードアウト$フェードイン効果?

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