如何/可能吗？ 这些因素的综合影响和动画（）函数？(How to/possible? to co

我是新来写我自己的jQuery和获得一些帮助，这代码片段的作品，因为我需要它（动画色彩，搭配的帮助jQuery的color.js插件 ，然后循环/通过他们不断循环） ：

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

但现在我已经使用这个片段多次（VAR C1，C2变种等）改变颜色，背景颜色，svgFill和svgStroke（的帮助下SVG动画插件 ）多元素（＃色CHANGE1，#COLOR -change2等），我不知道是否有一种方法，因为它们都使用相同的过渡（1000）和延迟（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);

Answer 1:

可以定义一个函数，它进行动画显示元件，进行动画的属性和值的通过阵列到循环：

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);
}

然后调用它的每个元素：

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

的jsfiddle

Answer 2:

你当然可以。 这个怎么样：

// 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/

如果你想使用任意数量的颜色又如： http://jsfiddle.net/f9wrtzwv/1/

文章来源: How to/possible? to combine these variables and animate() functions?