Jquery Pulsate Times

Question

我使用Pulsate函数（http://docs.jquery.com/UI/Effects/Pulsate）。使用参数'times'，我可以设置元素脉动的时间。默认值为5，但如何设置元素将无限脉动。

Answer 1

我建议你根本不要使用JQueryUI - 它是一个非常简单的动画，可以在不加载UI的情况下轻松完成：

// DOM ready
$(function(){
    // Self-executing recursive animation
    (function pulse(){
        $('#my_div').delay(200).fadeOut('slow').delay(50).fadeIn('slow',pulse);
    })();
});

工作演示：http://jsfiddle.net/AlienWebguy/bSWMC/

正如您所看到的，通过改变淡入淡出的速度和延迟的持续时间，可以很容易地调整它。

原始JQueryUI pulsate()函数为for使用times循环，因此您无法在不更改插件逻辑的情况下使用此插件实现结果：

$.effects.pulsate = function(o) {
    return this.queue(function() {
        var elem = $(this),
            mode = $.effects.setMode(elem, o.options.mode || 'show');
            times = ((o.options.times || 5) * 2) - 1;
            duration = o.duration ? o.duration / 2 : $.fx.speeds._default / 2,
            isVisible = elem.is(':visible'),
            animateTo = 0;

        if (!isVisible) {
            elem.css('opacity', 0).show();
            animateTo = 1;
        }

        if ((mode == 'hide' && isVisible) || (mode == 'show' && !isVisible)) {
            times--;
        }

        for (var i = 0; i < times; i++) {
            elem.animate({ opacity: animateTo }, duration, o.options.easing);
            animateTo = (animateTo + 1) % 2;
        }

        elem.animate({ opacity: animateTo }, duration, o.options.easing, function() {
            if (animateTo == 0) {
                elem.hide();
            }
            (o.callback && o.callback.apply(this, arguments));
        });

        elem
            .queue('fx', function() { elem.dequeue(); })
            .dequeue();
    });
};

Answer 2

Jordy，你可以使用脉动在一个函数内来完成上述任务。

//the function
function pulsateforever(){
$("element").effect("pulsate", { times:1 }, pulsatetime,function(){
//repeat after pulsating
pulsateforever();
});
}
//call function when DOM is ready
$(function(){
pulsateforever();
});

确保将 元素 替换为您要产生脉动的元素，并将 pulsatetime 替换为速度你想让它脉动。

Answer 3

基于AlienWebguy的答案，但没有“隐藏”和“显示”元素，而只是动画不透明度：

(function pulse(){
            $( "#elem" ).delay(200).animate({'opacity':1}).delay(500).animate({'opacity':0},pulse);
        })();

Answer 4

查看此新plugin

像魅力一样工作，脉动效果适用于所有浏览器。

Answer 5

只是猜测，但我会尝试0或-1。如果这没有帮助，您可以添加一个接近无限的值，可能是1000000或其他值。