javascript - jQuery 淡入淡出循环问题

Question

我正在制作一个结果屏幕，该屏幕在向用户显示他们的最佳时间/分数和最新时间​​/分数之间切换。我找到了一个 solution使用这个网站，但在让网站打开几个小时后，我发现时间已经不同步了。我知道这很难测试，所以我想看看这里是否有任何专家可以帮助我优化或修复我的代码。

CODEPEN JSFIDDLE

JS

$(document).ready(function() {

  setInterval( function() { resultsTransition(); }, 4000);

  function resultsTransition() {
    $('.latest-transition').fadeOut(500).delay(3500).fadeIn(500).delay(3500);
    $('.best-transition').fadeIn(500).delay(3500).fadeOut(500).delay(3500);
  }
});

Answer 1

我认为您的设计可以通过简单地切换 resultsTransition 方法中元素的不透明度而不是开始一个新的序列来改进(并解决不同步的问题)，这可能会干扰不可预测的间隔。

类似于:

var latestTransitionElementVisible = true; //the initial state of your elements

setInterval(resultsTransition, 4000); //note you can just pass the function name

function resultsTransition() {
    $('.latest-transition').fadeTo(500, latestTransitionElementVisible ? 0 : 1);
    $('.best-transition').fadeTo(500, latestTransitionElementVisible ? 1 : 0);
    latestTransitionElementVisible = !latestTransitionElementVisible ;
}