jQuery:无限的fadeOut $ fadeIn效果? [英] jQuery: infinite fadeOut $ fadeIn effect?

问题描述

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

I want to animate the label using fadeOut and fadeIn effect. But that code freezes the browser. How to fix that ?

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

推荐答案

更新( jsFiddle )

好吧，我有点无聊，所以为jQuery制作了一个插件，哈哈.本质上是pulsate效果，但还有一些其他选项.

Update (jsFiddle)

Okay, I got a bit bored, so made a plugin for jQuery, lol. It's essentially the pulsate effect, but with a few additional options.

(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方法，就像这样

Original (jsFiddle)

Alternatively, you could try using the delay method, like so

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

然后像这样跳动:

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

这篇关于jQuery:无限的fadeOut $ fadeIn效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！