jQuery Animate向後播放？

Question

我想用我在這裏找到的一個fadein + slidedown腳本在stackoverflow上。

$('#topmenu').animate({ 
    "height": "toggle", 
    "opacity": "toggle" 
}, "slow"); 

$('.post').delay(1000).animate({ 
    "height": "toggle", 
    "opacity": "toggle" 
}, "slow"); 

出於某種原因，這兩個動畫播放BACKWARDS here ...你能幫助我的原因嗎？

Answer 1

#topmenu和.post需要初始隱藏，以便在使用toggle選項時能夠淡入和向下滑動。例如，

#topmenu, .post { 
    display: none; 
} 

在你的情況下，由於要素初始是可見的，該toggle選項將消失並滑動出來。

您還可以在動畫之前使用.hide()。但是，我仍然相信在這裏使用CSS是最佳解決方案。

注：可以使"show"使用和"hide"代替"toggle"如果你申請的一次性影響。

Answer 2

您可以使用自定義值設置您的動畫。

要隱藏：

$('#topmenu').animate({ 
    "height": 0 
    "opacity": 0 
}, "slow"); 

$('.post').delay(1000).animate({ 
    "height": 0, 
    "opacity": 0 
}, "slow"); 

要顯示：

$('#topmenu').animate({ 
    "height": $('#topmenu').outerHeight(), 
    "opacity": 1 
}, "slow"); 

$('.post').delay(1000).animate({ 
    "height": $('.post').outerHeight(), 
    "opacity": 1 
}, "slow"); 

或者你甚至可以使用了slideDown /效果基本show和淡入/淡出。