交叉淡入淡出動畫

Question

我想使用#test和＃test1淡入淡出top_content函數。現在，div #test和＃test1正在使用一個簡單的切換，但我希望它們都在同一時間淡出。

$(document).ready(function() { 
    $('#test, #test1').hide(); 
    $('.home').click(function() { 
     var id = $(this).html().toLowerCase(); 
     var $top_content = $('#' + id + ':not(:visible)'); 
     if ($('.current').length === 0) { 
      toggleContent($top_content); 
     } else { 
      $('.current').toggle(400, function() { 
       toggleContent($top_content); 
      }); 
     } 
    }); 

    function toggleContent(top_content) { 
     top_content.toggle(400); 
     $('.current').removeClass('current'); 
     top_content.addClass('current'); 
    } 
    $("a.home").click(function() { 
     $('.active').not(this).removeClass('active'); 
     $(this).toggleClass('active'); 
    }); 
}); 

http://jsfiddle.net/FJ8DV/

Answer 1

你沒有得到一個「淡入淡出」效果的原因是這樣的代碼：

 $('.current').toggle(400, function() { 
      toggleContent($top_content); 
     }); 

你打的電話給你toggleContent()功能的回調在.toggle()完成時被稱爲- 所以在上一次淡出完成之前淡入不會發生。此舉出來的回調，它不會等待完成從而使動畫同時發生：

 $('.current').toggle(400); 
     toggleContent($top_content); 

而且，我認爲「淡入淡出」是指要素應在同一出現在同一個地方時間，所以你需要給他們position:absolute造型：

#top_content div { position : absolute; } 

假設你是在談論一個跨褪色，你可能會喜歡fadeToggle()更換.toggle()如本更新到您的演示（我也使用了更長的延遲，所以淡出更明顯）：http://jsfiddle.net/FJ8DV/1/