jQuery淡入淡出循环问题

我正在制作一个结果屏幕，在显示用户最佳时间/分数和最新时间/分数之间切换。我发现使用这个网站的一个solution，但离开网站几个小时后，我看到时间不同步。我知道这很难测试，所以我想我会看看是否有专家在这里可以帮助我优化或修复我的代码。jQuery淡入淡出循环问题

CODEPEN JSFIDDLE

$(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); 
    } 
});

来源

2014-02-05 2ne

提供更多的描述，因为你本说明书心不是给我的，你是要求解决 – Zword

这不只是在结果页面加载在一个水平 – 2ne

你的动画到底是什么任何想法需要更长的时间才能完成比间隔的持续时间。我不会指望jquerys动画占用你指定的间隔时间，所以你肯定会在某个时候遇到麻烦 –

我觉得你的设计可以通过简单地切换中元素的不透明度来改善（并解决不同步问题）方法而不是开始一个新的序列，这可能会影响间隔的不可预测性。

喜欢的东西：

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

来源

2014-02-05 10:13:20

我想无论你是面临的问题/问题是因为不同的动画时代。尝试以下操作：

$(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); 
    } 
    } 
});

来源

2014-02-05 09:34:40 Zword

jQuery淡入淡出循环问题

回答

相关问题