如何/可能？组合这些变量和animate（）函数？ [英] How to/possible? to combine these variables and animate() functions?

问题描述

我刚开始写自己的jQuery，并收到一些帮助，这段代码的工作，我需要它（动画的颜色，借助 jquery-color.js插件，然后循环/循环遍历它们）：

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

但是现在我已经多次使用这个代码片段（var c1，var c2等）颜色，背景颜色，svgFill和svgStroke（借助 svg动画插件）多个元素（＃color-change1，＃color-change2等），我想知道是否有一个方法来组合所有的片段，因为他们都使用相同的过渡（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);

推荐答案

您可以定义一个函数， ，animate的属性和值的数组循环：

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

这篇关于如何/可能？组合这些变量和animate（）函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！