pulse jquery without a plugin

Question

I have a simple fade in that I would like to pulse in and out indefinitely. I have found plugins that do this but was curious if jquery already had a loop() api so I could just take care of it in the script.

<script type="text/javascript">
$(document).ready(function(){    
    $('.bottom-left').delay(1000).fadeIn(900);
    $('.bottom-right').delay(3000).fadeIn(700);
});
</script>

score 7 · Accepted Answer · edited Jun 20 '20 at 09:12

If you want to get complex with it then this could turn into a lot of code but a simple implementation would only be a few lines. Basically you want to recursively call a function that either hides or shows an element from the callback function of the animation function:

$(function () {

    //declare a function that can fade in/out any element with a specified delay and duration
    function run_animation($element, delay, duration) {

        //animate fade in/out after delay
        $element.delay(delay).fadeToggle(duration, function () {

            //after fade in/out is done, recursively call this function again with the same information
            //(if faded-out this time then next-time it will be faded-in)
            run_animation($element, delay, duration);
        });
    }

    //initialize the animations for each element, specifying a delay and duration as well
    run_animation($('.bottom-left'), 1000, 900);
    run_animation($('.bottom-right'), 3000, 700);
});

Here is a demo: http://jsfiddle.net/xpw4D/

Docs for .fadeToggle(): http://api.jquery.com/fadeToggle

Update

You can beef-up this code a bit and animate more than two steps like this:

$(function () {

    function run_animation(options) {

        //initialize the count variable if this is the first time running and reset it to zero if there are no more steps
        if (typeof options.count == 'undefined' || options.count >= options.steps.length) {
            options.count = 0;
        }

        options.element.delay(options.steps[options.count].delay).fadeToggle(options.steps[options.count].duration, function () {

            options.count++;

            run_animation(options);
        });
    }

    run_animation({
        element  : $('.bottom-left'),
        steps    : [
            { delay : 1000, duration : 100 },
            { delay : 500, duration : 900 },
            { delay : 3000, duration : 500 }
        ]
    });
    run_animation({
        element  : $('.bottom-right'),
        steps    : [
            { delay : 2000, duration : 200 },
            { delay : 1000, duration : 1800 },
            { delay : 6000, duration : 1000 }
        ]
    });
});

Here is a demo: http://jsfiddle.net/jasper/xpw4D/2/

That's awesome, thanks! I still have 2 minutes until the check. Thanks again! — rd42, Feb 23 '12 at 23:13
You can create an object that stores steps for the animation, each step would include a delay, a duration, and a counter that keeps track of what step the animation is on. See the **update** to my code for an example of this: http://jsfiddle.net/jasper/xpw4D/2/. Note that I did not program a S.O.S. blinking pattern but this is a method for you to do so... :) — Jasper, Feb 24 '12 at 01:13
Awesome again. If there was a stackoverflow library of awesome answer posts, this should be in it. — rd42, Feb 24 '12 at 13:21
I think the problem with this is that when the element is fadedout, it is actually removed from the page flow... :/ — Sinaesthetic, Jul 27 '13 at 20:44
@rednoyz Worked for me, what issue are you seeing and which version of FF? — Jasper, May 13 '15 at 15:04

pulse jquery without a plugin

1 Answers1

Update