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.

AlienWebguy · Accepted Answer · 2011-08-28T21:11:41.843

32

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

edited Aug 28 '11 at 21:11

answered Aug 28 '11 at 20:03

AlienWebguy

76,997
17
122
145

Wow, thank you. Last question, if I use the fade-in,fade-out example the element disappears for some miliseconds, but all the elements under the fading element go up and down. Sorry for my English;-), so is it possible that the element fade in and out without disappearing? – Jordy Aug 29 '11 at 15:26
Sorry I didn't see your comment - Simply put the element in a wrapper with fixed dimensions :) http://jsfiddle.net/AlienWebguy/bSWMC/3/ – AlienWebguy Aug 31 '11 at 18:05
No problem, stupid I dont saw it, but it works;-) Thank you very much! – Jordy Aug 31 '11 at 18:56
Is there any way to stop this pulse effect? I'm checking a value via ajax and I want to stop this pulse effect when the values reaches 0. thanks – Ghasem Apr 15 '14 at 07:14
Sure you'd just replace `pulse` in `fadeIn('slow',pulse)` with a callback function that has a condition to check for your value and execute `pulse()` accordingly. – AlienWebguy Apr 15 '14 at 18:08
A couple problems: 1. It actually makes the element disappear and any adjoining elements will flicker/jump as they move into the vacuum. 2. No easy way to stop it. I'd put the pulse() function in a setInterval() call, then you can store the timer and turn it off as needed. – john k Jan 08 '15 at 03:40
Sure there is, put it in a DOM wrapper with a defined space; – AlienWebguy Jan 09 '15 at 21:13

score 12 · Answer 2 · answered Aug 28 '11 at 20:02

12

Jordy, you can use put the pulsate inside a function to accomplish the above.

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

Make sure you replace element with the element you want to pulsate, and pulsatetime with the speed in which you want it to pulsate.

answered Aug 28 '11 at 20:02

Kevin Pei

5,800
7
38
55

1

+1 This will absolutely work, though as I mentioned this shouldn't be using JQueryUI - a simple `$('element').fadeOut('slow').delay(500).fadeIn('slow',recursion..)` would be optimal I believe. – AlienWebguy Aug 28 '11 at 20:16
Ok, so what should I do? Dont use the UI Pulsate but Fade in and out? Thanks for help;-)! – Jordy Aug 28 '11 at 20:38

score 3 · Answer 3 · answered Dec 04 '13 at 20:34

3

Based off of AlienWebguy's answer, but without "hide" and "show"ing the element, instead just animating the opacity:

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

answered Dec 04 '13 at 20:34

Katie

45,622
19
93
125

1

this is quite nice and simple and does the job – Mr Sorbose Jul 09 '15 at 15:57

score 1 · Answer 4 · answered Oct 08 '13 at 12:10

1

Check out this new plugin

Works like charm and the pulsate effect works on all browsers .

answered Oct 08 '13 at 12:10

James Dayeh

516
1
5
13

score -3 · Answer 5 · answered Aug 28 '11 at 20:02

-3

Just a wild guess, but I'd try 0 or -1. If this doesn't help, you may just add a value that is close to unlimited, maybe 1000000 or something.

answered Aug 28 '11 at 20:02

Sgoettschkes

13,141
5
60
78

Jquery Pulsate Times

5 Answers5