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

前言：我是新来写我自己的jQuery代码，并有帮助写下面的animateContinously（）函数。

我使用backstretch.js有一个完整的浏览器视窗/背景幻灯片和jQuery的动画（）函数来改变颜色（与的帮助jQuery的color.js插件）的文本显示在控制直道的顶部图像，这取决于哪个直道图像被示出。它的工作原理，但直道（）持续时间和动画（）延迟是不同步的，如果我将它们设置为相同的号码，即：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()不绑在一起，他们只是总是会出现不一致的现象。解决的办法是放弃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);
});

的jsfiddle

如果值的阵列都不尽相同的长度，你可以做这样的事情在此的jsfiddle 。