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 ;
}

Answer 2

我猜你遇到的任何问题都是因为动画时间不同。请尝试以下方法：

$(document).ready(function() {
  setTimeout( function() { resultsTransition(); }, 4000);

  function resultsTransition() {
    if(!$('.latest-transition').is(':animated') && !$('.best-transition').is(':animated'))
    {
    $('.latest-transition').fadeOut(500).delay(3500).fadeIn(500).delay(3500);
    $('.best-transition').fadeIn(500).delay(3500).fadeOut(500).delay(3500);
    setTimeout( function() { resultsTransition(); }, 4000);
    }
  }
});

jQuery淡入并淡出循环问题

2 个答案: