2011-09-22 51 views
0

基本上我有一些標題。當單擊其中一個標頭時,其餘標頭會向下滑動(爲此,我使用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); 

}); 

}); 

回答

2

充分利用淡入動漫完整的開始,通過動畫()回調函數

$(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); 

    }); 

    }); 
+0

這正是我期待的,三江源,非常讚賞。但只有一個問題,現在fadeIn處於不同的功能,我的THIS選擇器將不會與我點擊的標題一起工作。我如何在我點擊的標題內定位UL?目前,它在頭部動畫的UL中正在消失。 (header below) –

+0

不用擔心,我已經完成了它:$(this).prev('ul#work-headers li')。find('ul')。fadeIn(3000); ..再次感謝! –

+0

哎呀,來得太晚了:D代碼更新了答案... – NicolaPasqui