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淡入淡出循環問題

回答

相關問題