CODEWITHSUNDEEP
javascriptjquery
calculataur
calculataur

Reputation: 171

jQuery color style alternating

I'm trying to achieve a jQuery effect like: http://jsfiddle.net/Qcghe/1/

$(document).ready(function() {  
    setInterval(function() {
        $('small:nth-of-type(1)')
            .animate( { color: '#F7B903' }, 750)
            .animate( { color: '#FFF' }, 1000); 
    }, 1000);

    setInterval(function() {
        $('small:nth-of-type(2)')
            .animate( { color: '#5BB6FD' }, 750)
            .animate( { color: '#FFF' }, 1000); 
    }, 2000);

    setInterval(function() {
        $('small:nth-of-type(3)')
            .animate( { color: '#D13360' }, 750)
            .animate( { color: '#FFF' }, 1000); 
    }, 3000);

});

I want to animate the colour of the dots in the following order:

  1. white, white, white (initial state)
  2. blue, white, white
  3. blue, red, white
  4. blue, red, green
  5. white, red, green
  6. blue, white, green
  7. blue, red, white
  8. …and back to the initial state.

I made an animated GIF in Photoshop to help illustrate (black and white are inverted):

gif animation http://cdn.vpsunder10.com/1.gif

Upvotes: 5

Views: 114

Answers (2)

Jordan Gray
Jordan Gray

Reputation: 16499

Because each of them follows a similar but related cycle of animations, I'd try expressing this as one sequence of steps rather than three separate ones.

var $dots = $('#dots span'),
    colors = ['blue', 'red', 'green'], // Colour assigned to each dot, in order.
    step = 1000;                       // Duration of each animation step in ms.

function cycle() {
    $dots
        .finish() // Ensure no animations still running from last cycle.
        .each(function(index, dot) {
            var $dot = $(dot),
                color = colors[index];

            $dot
                .delay(index * step)
                .animate({ color: color }, step)
                .delay(step * 2)
                .animate({ color: 'white' }, step)
                .promise()
                .done(function() {
                    // All but last should be restored to dot colour.
                    if (index != 2) $dot.animate({ color: color }, step);
                })
            ;
        });

    // Set all the dots to white once animations have finished.
    $dots.promise().done(function() { $dots.animate({ color: 'white' }, step) });
}

// Start immediately, and thereafter every seven steps.
cycle();
setInterval(cycle, step * 7);

jsFiddle demo

You can make it faster or slower by playing with the step variable.

(If you were interested and don't have to support older browsers, I could also show you how to do this in pure CSS with keyframe animations.)

Upvotes: 0

zzlalani
zzlalani

Reputation: 24384

check the code

$(document).ready(function() {  
  setInterval(function() {
    $('small:nth-of-type(1)')
    .animate( { color: '#F7B903' }, 1000)
    .delay(4000)
    .animate( { color: '#FFF' }, 1000); 

     $('small:nth-of-type(2)')
    .delay(1000)
    .animate( { color: '#5BB6FD' }, 1000)
    .delay(5000)
    .animate( { color: '#FFF' }, 1000); 

      $('small:nth-of-type(3)')
    .delay(2000)
    .animate( { color: '#D13360' }, 1000)
    .delay(6000)
    .animate( { color: '#FFF' }, 1000); 

    }, 10000);
 });

http://jsfiddle.net/Qcghe/3/

Upvotes: 1

Related Questions