jQuery fadeOut淡入問題

請看http://jsfiddle.net/yXnWP/2/並注意「查看最近更新」。點擊它並注意它是如何從更新過渡到註冊表單的？現在繼續慢慢做，並注意第四次轉換的過程。這是代碼的一部分負責。請給我任何建議，提示或建議，可以解決這個問題的不同過渡。jQuery fadeOut淡入問題

我的問題是：爲什麼它以單向方式轉換FIRST 3點擊，然後它做了不同的轉換？刷新，它開始於FIRST 3點擊和切換的第一個轉換...爲什麼？

      <div class='index-update-register-container'> 
       <button class='index-updates-register-link' value='FadeOut' onclick="fade('reg', 'upd', this);">View Recent Updates</button> 
      </div> 
      <div class='index-updates-container' id='upd'> 
       Updates 
      </div> 
      <div class='index-register-container' id='reg'> 
       <form action='index.php' method='post'> 
        Register Form 
       </form> 
      </div>    


</body> 
<script> 
function fade(div_id_out, div_id_in, button) { 
    if(button.value == 'FadeOut') { 
     $('#'+div_id_out).fadeOut(500, function() { 
     $('#'+div_id_in).fadeIn(500); 
     }); 
     $(button).html("Register"); 
     button.value = 'FadeIn'; 
    } 
    else { 
     $('#'+div_id_out).fadeIn(500, function() { 
     $('#'+div_id_in).fadeOut(500); 
     }); 
     $(button).html("View Recent Updates"); 
     button.value = 'FadeOut'; 
    } 
} 
</script>

來源

2012-07-11 Skovy

這是你的code.what你期望的正常行爲並要淡入淡出和同步運行？ – 2012-07-11 05:49:58

不，我想讓第一個div淡出，然後第二個div淡入。它有時會這樣做，有時它看起來會立即發生而沒有任何淡入淡出。我正在做一個jsfiddle來展示我在說什麼。 – Skovy 2012-07-11 05:54:58

也許是因爲在else語句中，在淡出現有語言之前，你會淡入第二個div？ – Jeemusu 2012-07-11 06:06:09

基於jsfiddle我發表在評論muthu的答案。

您需要將其中一個div設置爲從一開始就隱藏，否則它們都可見，因此不存在轉換。

頂部的一個簡單的$('#upd').hide();可以解決這個問題。

更新的jsfiddle：
http://jsfiddle.net/K7DbQ/

來源

2012-07-11 07:17:34 Jeemusu

謝謝。我知道我必須這樣做，我只是不確定是因爲我剛剛開始使用jQuery，而且我對它仍然很陌生。 – Skovy 2012-07-11 15:13:59

增加幀刷新間隔幫了我之前。

jQuery.fx.interval = 13 //This is the default

您可以嘗試增加它到30。增加間隔意味着您正在降低刷新率，因此您的動畫會減少內存資源的負載，因此動作看起來會更少。

有關此更多信息here。

來源

2012-07-11 06:07:58

jQuery fadeOut淡入問題

回答

相關問題