Question

我正在尝试使用我在stackoverflow上找到的fadein + slidedown脚本。

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

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

出于某种原因，这两个动画正在向后播放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 / slideUp和fadeIn / fadeOut。

jQuery Animate向后播放？

2 个答案: