0

I'm new to writing my own jQuery and received some help with this snippet of code that works as I need it to (to animate colors, with the help of jquery-color.js plugin, and then cycle/loop through them continuously):

var c = 0;
setInterval(function () {
    var colors = ['#de7056', '#4ec67f']
    if (c > colors.length - 1) c = 0;
    $("#neck").animate({
        backgroundColor: colors[c++]
    }, 1000);
}, 5000);

But now I have used this snippet multiple times to (var c1, var c2, etc.) change the color, background colour, svgFill and svgStroke (with the help of svg animate plugins) of multiple elements (#color-change1, #color-change2, etc.) and I'm wondering if there is a way to combine all of the snippets since they are all using the same transition (1000) and delay (5000)?

var c1 = 0;
setInterval(function () {
    var colors = ['#de7056', '#4ec67f']
    if (c1 > colors.length - 1) c1 = 0;
    $("#color-change1").animate({
        backgroundColor: colors[c1++]
    }, 1000);
}, 5000);

var c2 = 0;
setInterval(function () {
    var colors = ['#de7056', '#4ec67f']
    if (c2 > colors.length - 1) c2 = 0;
    $("#color-change2").animate({
        svgFill: colors[c2++]
    }, 1000);
}, 5000);

var c3 = 0;
setInterval(function () {
    var colors = ['#536260', '#fff']
    if (c3 > colors.length - 1) c3 = 0;
    $("#color-change3").animate({
        color: colors[c3++]
    }, 1000);
}, 5000);

var c4 = 0;
setInterval(function () {
    var colors = ['#536260', '#fff']
    if (c4 > colors.length - 1) c4 = 0;
    $("#color-change4").animate({
        svgFill: colors[c4++]
    }, 1000);
}, 5000);

var c5 = 0;
setInterval(function () {
    var colors = ['#536260', '#fff']
    if (c5 > colors.length - 1) c5 = 0;
    $("#color-change5").animate({
        svgStroke: colors[c5++]
    }, 1000);
}, 5000);
codeview
  • 209
  • 5
  • 15
  • What are you asking - how to "cycle/loop through [the animations] continuously" or how to "combine all of the snippets"? The two questions are related but not the same. – Roamer-1888 Nov 15 '14 at 21:13

2 Answers2

0

Sure you can. How about this:

// one iteration foreach #color-change element
for(var i = 1; i < 6; i++){
    var $target = $('#color-change' + i);
    changeColor(0, $target);
}

function changeColor(color, $target){

    setTimeout(function () {
        var colors = ['#de7056', '#4ec67f'];
        $target.animate({
            backgroundColor: colors[color]
        }, 1000);

        // recursive call to change the color to a new value
        changeColor(!color ? 1 : 0, $target); 

    }, 5000);  
}

http://jsfiddle.net/f9wrtzwv/

Another example if you want to use any number of colors: http://jsfiddle.net/f9wrtzwv/1/

filur
  • 2,116
  • 6
  • 24
  • 47
  • Thank you for your answer, but I need to be able to control the colors separately for each element. I did not mention that in the original question, but code does show different colors for different elements. John S's answer is exactly what I needed to be able to do this. – codeview Nov 15 '14 at 22:37
  • @codeview Well, just pass the desired colors as an extra argument – filur Nov 15 '14 at 23:37
  • I am not sure how to make your code work for what I need. The accepted answer is exactly what I was hoping for, though. But thanks again. – codeview Nov 16 '14 at 14:18
0

You could define a function that takes the element to animate, the attribute to animate, and the array of values to cycle through:

function animateContinuously($elements, attr, values) {
    var i = 0, count = values.length;
    setInterval(function() {
        i = (i + 1) % count;
        var props = {};
        props[attr] = values[i];
        $elements.animate(props, 1000);
    }, 5000);
}

Then call it for each element:

animateContinuously($("#color-change1"), 'backgroundColor', ['#de7056', '#4ec67f']);
animateContinuously($("#color-change2"), 'svgFill', ['#de7056', '#4ec67f']);

jsfiddle

John S
  • 21,212
  • 8
  • 46
  • 56
  • This is perfect. Thank you very much. Is it possible to add 2 or more elements in a single call (ie: the same animate on #color-change2 and #color-change3)? I tried spaces, commas, seperate quote wraps but nothing worked: `animateContinuously($("#color-change2", "#color-change3"), 'svgFill', ['#de7056', '#4ec67f']);` – codeview Nov 15 '14 at 22:35
  • @codeview - Yes, it should handle multiple elements. You just need to use the correct selector: `$('color-change2, #color-change3')`. – John S Nov 15 '14 at 22:42
  • Ah! Single quotes. I didn't try that. Why would single quotes work and not double quotes? Also, I was wondering if you would be able to help me with this new question I just posted: http://stackoverflow.com/questions/26951507/backstretch-js-duration-out-of-sync-with-animate-delay – codeview Nov 15 '14 at 23:00
  • @codeview - The type of quotes isn't the difference. (I'm just in the habit of using single quotes.) It's a single string with the comma inside the string. – John S Nov 16 '14 at 04:44
  • @codeview - I submitted an answer to [your other question](http://stackoverflow.com/q/26951507/859640). – John S Nov 16 '14 at 04:45
  • Thank you. I was sure I had tried the single string, with a comma inside the string, with double quotes as well, and it didn't work...but tried that as well now and they both work. – codeview Nov 16 '14 at 14:16