Jquery backstretch.js持续时间与.animate（）延迟不同步

前言：我刚开始编写自己的jQuery代码，并且已经编写了下面的animateContinously函数

我使用的是一个完整的浏览器视口/背景幻灯片和功能，可以借助显示在backstretch控制图像顶部的文本来更改颜色，具体取决于显示的是哪个backstretch图像。这是可行的，但如果我将后退持续时间和动画延迟设置为相同的数字，即：5000 5秒，则后退持续时间和动画延迟不同步。因此，我尝试将它们偏移1000 1秒，文本和反向拉伸图像在完全相同的时间淡入/淡出，正如所希望的那样……但在15次左右的转换后，它们再次失去同步

关于为什么相同的持续时间和延迟时间量不起作用，有什么想法/帮助吗？和/或为什么1秒偏移开始工作，然后失去同步？这是我的密码：

<script src="jquery.js"></script>
<script src="jquery-color.js"></script>
<script src="backstretch.js"></script>
<script>
  $.backstretch([
  "_img/bg01.jpg",
  "_img/bg02.jpg"
  ], {
  fade: 1000,
  duration: 4000
  });
</script>
<script>
    function animateContinuously($element, attr, values) {
    var i = 0, count = values.length;
    setInterval(function() {
        i = (i + 1) % count;
        var props = {};
        props[attr] = values[i];
        $element.animate(props, 1000);
    }, 5000); // // in sync with backstretch() if 1000 more, but falls out of sync after 15-18 transitions

    animateContinuously($("#color-change1"), 'color', ['#de7056', '#4ec67f']);
    animateContinuously($("#color-change2"), 'svgFill', ['#de7056', '#4ec67f']);
</script>
</body>

---

由于背景图像的循环和设置间隔没有联系在一起，它们总是会失去同步。解决方案是放弃setInterval，而是使用。触发backstretch.before事件时，您将启动动画

$(window).on('backstretch.before', function() {
    // Start animations here.
});

如果要设置动画的图像、颜色和其他值的数量相同，则可以有：

var TRANSITION_DURATION = 1000,
    PAUSE_DURATION = 4000;

// Note: These arrays should all have the same length.
var IMAGES = ['_img/bg01.jpg', '_img/bg02.jpg'],
    COLORS = ['#de7056', '#4ec67f'];

var index = 0;

$.backstretch(IMAGES, {
    fade: TRANSITION_DURATION,
    duration: PAUSE_DURATION
});

$(window).on('backstretch.before', function() {
    index = (index + 1) % IMAGES.length;
    $('#color-change1').animate({ backgroundColor: COLORS[index] }, TRANSITION_DURATION);
    $('#color-change2').animate({ svgFill: COLORS[index] }, TRANSITION_DURATION);
});

---

如果值数组的长度不完全相同，您可以执行类似于的操作。

Wow！再次感谢。这是非常有用的。我的数组总是相同的长度，所以我将使用您的第一个示例。我确实也看了第二个JSFIDLE，但我不明白为什么999999灰色在数组中第二个是43c67橙色时会应用于颜色更改1中的第二个？@codeview-这是因为我将两个形状的初始颜色都设置为白色。我现在已经更改了它，所以它们最初都是de7056，是阵列中的第一种颜色。i变量从零开始，但它们在动画之前递增，因此第一次运行动画时，它会转换为数组中的第二种颜色，因为i=1。