延遲淡入直到動畫行動發生

Question

基本上我有一些標題。當單擊其中一個標頭時，其餘標頭會向下滑動（爲此，我使用animate（）方法）。這工作正常。但是在標題滑下之後，我希望該標題的內容顯示在它之前的空格中。

下面的代碼工作，項目被抓取和顯示。我遇到的問題是延遲$(this).find('ul').fadeIn();部分。目前，正在發生的動畫正在消失，導致動畫跳躍。

任何幫助將不勝感激。

在此先感謝。

$(function() { 

$('ul#work-headers li ul').hide() 

$('ul#work-headers li').toggle(function() { 

    var itemHeight = $('ul#work-headers li').find('ul').height(); 

    $(this).next('ul#work-headers li').animate({ marginTop: itemHeight }, 1000); 

    $(this).find('ul').fadeIn(); 

}, function() { 

    $(this).next('ul#work-headers li').animate({ marginTop: "0px" }, 1500); 

    $('ul#work-headers li ul').fadeOut(1000); 

}); 

}); 

Answer 1

充分利用淡入動漫完整的開始，通過動畫（）回調函數

$(function() { 

    $('ul#work-headers li ul').hide() 

    $('ul#work-headers li').toggle(function() { 

     var caller = $(this); 
     var itemHeight = $('ul#work-headers li').find('ul').height(); 

     $(this).next('ul#work-headers li').animate({ marginTop: itemHeight }, 1000, function() { 
     // Animation complete. 
     caller.find('ul').fadeIn(); 
     }); 



    }, function() { 

     $(this).next('ul#work-headers li').animate({ marginTop: "0px" }, 1500); 

     $('ul#work-headers li ul').fadeOut(1000); 

    }); 

    });