CODEWITHSUNDEEP
jqueryjquery-animate
Ryan Prentiss
Ryan Prentiss

Reputation: 1642

jQuery Repetitive Multi-Color Animation

Using jQuery, how can I gradually change from a first color, to a second color, to a third color, and then back repeating all within a master animation?

Purpose: I am attempting to create a progress bar which oscillates through colors.

Current Code

$('div').animation({width:'100%'}, ***varying time frame***, 'linear');

Upvotes: 0

Views: 274

Answers (1)

Amit Soni
Amit Soni

Reputation: 1427

try this way

var colors = ["Red","Green","Blue","Black"];
var i = 0;
setInterval(function(){
    $("#pb").animate({
        backgroundColor:colors[i]
    },800);
    if(i > colors.length-1){
        i = 0;
    }
    else
    {
        i++;
    }
},1500);

setInterval(function(){
    var width = $("#pb").width();
        if(width < 300){
         $("#pb").animate({
            width:"+=25"
        },300);
    }
},700);

DEMO

Upvotes: 1

Related Questions