Question

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

我正在使用backstretch.js拥有完整的浏览器视口/背景幻灯片和jQuery animate()功能来更改显示的文本的颜色（借助jquery-color.js plugin的帮助）后伸控制图像的顶部，取决于显示哪个后伸图像。它工作正常，但如果我将它们设置为相同的数字，即：5000（5秒），则backstretch（）持续时间和animate（）延迟不同步。所以我尝试将它们偏移1000（1秒），并且文本和后伸图像在同一时间按照需要淡入/淡出...但是在15次左右的过渡后它们再次失去同步。

任何想法/帮助为什么相同的持续时间＆amp;延迟时间量不起作用？和/或为什么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中的操作。

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

1 个答案: