jquery - jQuery Animate 向后播放？

Question

我正在尝试使用我在 stackoverflow 上找到的淡入淡出 + 幻灯片脚本。

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

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

出于某种原因，这两个动画正在向后播放……你能帮我找出原因吗？

Answer 1

#topmenu并且需要最初隐藏，以便在使用该选项.post时能够淡入和向下滑动。toggle例如，

#topmenu, .post {
  display: none;
}

在您的情况下，由于元素最初是可见的，因此该toggle选项将淡出并将它们滑出。

您也可以.hide()在动画之前使用。但是，我仍然相信使用 CSS 是这里的最佳解决方案。

注意：如果您正在应用一次性效果，则可以使用"show"and"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。