jQuery FadeOut FadeIn運行多次

Question

我在這裏弄錯了什麼？基本上我有三個單選按鈕，當我點擊一個我想使所有匹配的Div淡出，然後淡入一個匹配的Div回來。

實際上發生的事情是當我單擊單選按鈕時，我所有的Div都淡出如預期的那樣，然後新的淡入，然後出，然後再回來。

changePage = function() 
{ 
    $('.pageAlt').on('click',function() //click a radio button with class pageAlt 
     { 
      pageVal=$(this).val(); // get the Value for this button (1,2,3,4) 

      $('.divScriptsTableOuter').fadeOut('slow',function() // FadeOut all Divs (as they all have class divScriptsTableOuter) 
       { 
        switch (pageVal) // FadeIn the One Div that matches 
         { 
          case "1": 
           $('#divONE').delay(500).fadeIn(); 
           break; 
          case "2": 
           $('#divTWO').delay(500).fadeIn(); 
           break; 
          case "3": 
           $('#divTHREE').delay(500).fadeIn(); 
           break; 
          case "4": 
           $('#divFOUR').delay(500).fadeIn(); 
           break; 
          default: 
           $('#divONE').delay(500).fadeIn(); 
         } 
       }) 
     }) 
} 

Answer 1

你可以做的另一種方式......像這樣：

$(function() { 
 
    $('.pageAlt').on('click', function() { 
 
    var $el = null; 
 
    pageVal = $(this).val(); 
 
    switch (pageVal) 
 
    { 
 
     case "1": 
 
     $el = $('#divONE'); 
 
     break; 
 
     case "2": 
 
     $el = $('#divTWO'); 
 
     break; 
 
     case "3": 
 
     $el = $('#divTHREE'); 
 
     break; 
 
     case "4": 
 
     $el = $('#divFOUR'); 
 
     break; 
 
     default: 
 
     $el = $('#divFIVE'); 
 
    }  
 
    $('.divScriptsTableOuter').not($el.fadeOut("slow").delay(500).fadeIn()).fadeOut('slow'); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="pageAlt" type="radio" name="val" value="1"> 1 
 
<br> 
 
<input class="pageAlt" type="radio" name="val" value="2"> 2 
 
<br> 
 
<input class="pageAlt" type="radio" name="val" value="3"> 3 
 
<br> 
 
<input class="pageAlt" type="radio" name="val" value="4"> 4 
 
<br> 
 
<input class="pageAlt" type="radio" name="val" value="5"> 5 
 
<div id="divONE" class="divScriptsTableOuter"> 
 
    1 
 
</div> 
 
<div id="divTWO" class="divScriptsTableOuter"> 
 
    2 
 
</div> 
 
<div id="divTHREE" class="divScriptsTableOuter"> 
 
    3 
 
</div> 
 
<div id="divFOUR" class="divScriptsTableOuter"> 
 
    4 
 
</div> 
 
<div id="divFIVE" class="divScriptsTableOuter"> 
 
    5 
 
</div>

Answer 2

我認爲這個問題是關係到fadeOut回調是：

要調用的函數，一旦動畫完成，稱爲每次匹配的元素一次。

Source

注意「每一次匹配的元素」，讓你的回調要求每個匹配的元素，一旦淡出。

我已在jsfiddle中轉載您的問題。爲了解決這個問題，你必須等到每個元素都已經淡出之後再使用fadeIn。

這裏是我的解決方案：

1. fadeOut一切，當DOM加載
2. fadeOut只隱藏要素，而不必等待它完成
3. fadeIn選擇一個

Updated fiddle。