CODEWITHSUNDEEP
jqueryanimation
user3495224
user3495224

Reputation: 49

Sequence loop animation for different times

The animation is already taken, however I need to let this halo as follows:

1) Visitor arrives - halo is completely off
2)After 1 second the halo flickers quickly (3-4 flickers) then is full bright (no flicker)
3) After 1 second we get  flicker again 2-3 flickers then returns to full bright.
4) Halo remains full bright - no cycling to 1

jQuery

var haloRob = ".halo";

    function flash(){
        var del = Math.floor((Math.random()*300)+10);
        $(haloRob).toggleClass("display-halo").delay(del);
        $(haloRob).promise().done(function(){
            flash();
        });
    }

$(haloRob).animate({'marginTop': '27px', opacity: 1}, 1000, flash());

jsfiddle

Upvotes: 0

Views: 39

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

Make your flash take a countdown and call a callback on completion of the specified number of off/on cycles.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/A5YqV/7/

var haloRob = ".halo";

function flash(count, callback) {
    if (count > 0) {
        var del = Math.floor((Math.random() * 300) + 10);
        $(haloRob).toggleClass("display-halo").delay(del);
        $(haloRob).promise().done(function () {
            flash(count - 1, callback);
        });
    }
    else
    {
        if (callback) {
            callback();
        }
    }
}

$(haloRob).animate({
    'marginTop': '27px',
    opacity: 1
}, 1000, function () {
    flash(~~((Math.random() * 1 + 3)) * 2, function(){
        setTimeout(function(){flash(~~((Math.random() * 1 + 2)) * 2, function(){
            alert("done");
        });}, 1000);
    })
});

*Note: ~~ is just an easy way to convert floating point numbers to integers.

*Note: the random counts must be doubled to ensure the final state is "on"

The code can be simplified further, but should get you headed in the right direction

Upvotes: 1

Related Questions