jQuery-div在下一次開始消退之前不會完全消失

Question

問題很簡單，我知道，但我有一段時間試圖弄清楚。我在一個頁面上有8個div，用於保存隱藏起始的圖像庫。當用戶點擊一個圖標來查看一個畫廊時，他們選擇的第一個畫廊全部變得閃亮。但是當他們選擇另一個時，他們正在觀看的那個開始淡出，而另一個淡入，並且隨着第一個div被隱藏而移動到其正確的位置。

參見jsfiddle。

所以，我的問題是顯而易見的：
如何讓他們正在查看的圖庫在下一個圖片淡入正確的空間之前完全淡出。

Answer 1

你可以把div的彼此頂部position:absolute;

工作例如：http://jsfiddle.net/Ghokun/wnTte/13/

Answer 2

怎麼樣的文檔（fadeOut）與

$('#image_one').delay(500).fadeIn(); 

和喜歡聰明的更換

$('#image_one').fadeIn(); 

....通過這句話

Answer 3

您的問題進行了說明：

如果多個元素是ani交配，重要的是要注意，回調是每個匹配元素執行一次，而不是整個動畫一次。

換句話說，因爲你在動畫兩件事情，回調將被調用兩次。由於您的某個div已隱藏，因此fadeOut立即完成*，並立即回撥。

* 即時完成（如果已顯示/隱藏）顯示/隱藏類型助手功能是唯一的。如果您構建了自己的淡入淡出動畫，則無論當前狀態如何，它總是會花費指定的時間量。

你可以通過幾種方法解決這個問題。最簡單的是鏈相互裏面你​​調用，而不是調用一個兩個元素：

$('.icon_one').click(function() { 
    $('#image_two').fadeOut(function() { 
     $('#image_three').fadeOut(function() { 
      $('#image_one').fadeIn(); 
     }); 
    }); 
}); 

因爲一個通常會隱藏已，它會落空瞬間，但其他需要時間。無論哪種方式，只有在兩者都完成後纔會淡入。

演示：http://jsfiddle.net/jtbowden/XQnhs/

當然，有一點改變你的HTML，你可以做所有這三個與一個單擊處理：

<div id="image_one" class="imageBox" style="background-color:red;height:50px;width:50px">&nbsp;</div> 
<div id="image_two" class="imageBox" style="background-color:blue;height:50px;width:50px">&nbsp;</div> 
<div id="image_three" class="imageBox" style="background-color:yellow;height:50px;width:50px">&nbsp;</div> 

<div data-num="one" class="icon_show">Red</div> 
<div data-num="two" class="icon_show">Blue</div> 
<div data-num="three" class="icon_show">Yellow</div> 

腳本：

$('.icon_show').click(function() { 
    var showID = '#image_' + $(this).data('num'); 
    $('.imageBox:visible').fadeOut(function() { 
     $(showID).fadeIn(400); 
    }); 
}); 

演示：http://jsfiddle.net/jtbowden/NAcPW/

關鍵是您可以根據您點擊的鏈接自動找出顯示哪一個。在這種情況下，我通過在數據屬性中存儲數字來完成此操作。您也可以使用ID的一部分，或者通過使用index來計算偏移量，然後將其輸入eq。

演示：http://jsfiddle.net/jtbowden/NnN58/

有很多的方法來簡化這個代碼。

Answer 4

這是有趣的...我喜歡你的設置方式您jsfiddle-它使人們更容易玩用。看看這是否有幫助.. fadeOuts必須超過元素。只能淡出可見的一個。我認爲你的問題正在被淡出的元素調用。

這裏是你的jsfiddle略有變化..

$(function(){ 
     $('#image_two,#image_three').hide(); 

//1//  

      $('.icon_one').click(function(){     
       $('#image_two:visible,#image_three:visible').fadeOut(
        function(){ 

        $('#image_one').fadeIn(); 
        } 
      ); 
      }); 

//2// 
alert("binding"); 
    $('.icon_two').click(function(){ 
     $('#image_one:visible,#image_three:visible').fadeOut(
      function(){ 
       $('#image_two').fadeIn(); 
      } 
              ); 
    }); 

    //3// 

    $('.icon_three').click(function(){ 
     $('#image_one:visible,#image_two:visible').fadeOut(function(){ 
     $('#image_three').fadeIn(); 
     }); 
    }); 

});