variables - jquery animate() color multiple times, every 5 seconds, then loop/restart -

variables - jquery animate() color multiple times, every 5 seconds, then loop/restart -

i new coding own jquery. i've loaded jquery , jquery color plugin , have managed simple color animate after 5 sec delay, 1 sec transition:

$("h1").delay(5000).animate({ color: "blue" }, 1000 );

what trying next alter color 1 time again , again, every 5 seconds (blue, green, red, pink, orange) , have cycle go on on , on without stopping.

i found this post helpful in showing colors can set in variable i'm not sure go there , have cycle start on when it's done.

any help and/or links appreciated.

try this:

fiddle var c = 0; setinterval(function () { var colors = ['blue', 'green', 'red', 'olive', 'yellow'] if (c > colors.length - 1) c = 0; $("h1").animate({ color: colors[c++] }, 1000); }, 5000);

css solution be:

fiddle h1 { animation: colorchanger 60s infinite; -moz-animation: colorchanger 60s infinite; -webkit-animation: colorchanger 60s infinite; } @-moz-keyframes colorchanger { { color: blue; animation-duration: 1s; } 20% { color: green; animation-duration: 1s; } 40% { color: red; animation-duration: 1s; } 60% { color: olive; animation-duration: 1s; } 80% { color: yellow; animation-duration: 1s; } { color: brown; animation-duration: 1s; } } @-webkit-keyframes colorchanger { { color: blue; animation-duration: 1s; } 20% { color: green; animation-duration: 1s; } 40% { color: red; animation-duration: 1s; } 60% { color: olive; animation-duration: 1s; } 80% { color: yellow; animation-duration: 1s; } { color: brown; animation-duration: 1s; } }

jquery variables jquery-animate delay