backstretch.js 持续时间与 .animate() 延迟不同步

Question

前言：我是编写自己的 jQuery 代码的新手，并且有 had help 在下面编写 animateContinously() 函数。

我正在使用backstretch.js 拥有完整的浏览器视口/背景幻灯片和jQuery animate() 函数来更改显示在后伸控制图像顶部的文本颜色（在jquery-color.js plugin 的帮助下） ，具体取决于显示的回弹图像。它可以工作，但是如果我将它们设置为相同的数字，即：5000（5 秒），则 backstretch() 持续时间和 animate() 延迟不同步。因此，我尝试将它们偏移 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>

Answer 1

由于背景图像的循环和setInterval() 没有绑定在一起，它们总是会不同步。解决方案是放弃setInterval()，转而使用the events triggered by the Backstretch plugin。当“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);
});

jsfiddle

如果值数组的长度不同，您可以在this jsfiddle 中执行类似的操作。