Jquery Pulsate Times

Question

I use the function Pulsate (http://docs.jquery.com/UI/Effects/Pulsate). With the argument 'times' I can set the times the element pulsates. The Default value is 5, but how can I set it that the element will pulsate infinitely.

Answer 1

I recommend you don't use JQueryUI at all for this - it's a very simple animation and can be easily done without loading UI:

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

Working demo: http://jsfiddle.net/AlienWebguy/bSWMC/

As you can see, it can be tweaked quite easily by changing the speed of the fades and the duration of the delays.

The original JQueryUI pulsate() function uses a for loop for times so you can't achieve your result using this plugin without changing the logic of the plugin:

$.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();
    });
};