0

Take a look at this fiddle.

I increased the duration to 2000 to exactly show you what I am talking about. When you click the close (X) the animation is not what one would call slideUp. I was expecting that the form would move upward until it fully disappears. Instead, it hides from bottom to top slowly.

Is the slideUp expected to behave like it is? Or is it something that I did?

I am guessing its because of this part of CSS (line 15)

.js-enabled form {
    position: absolute;
    top: -21px;
    display: none;
}
4

2 回答 2

1

即使你有slideDownunder config，你也在使用fadeInunder init。我还将2000ms（2 秒）更改为500ms（1/2 秒）。小提琴： http: //jsfiddle.net/dj2Y8/3/

jQueryslideUp本质上height是对元素进行动画处理0px并将其隐藏；所以是的，它正在按应有的方式工作。

于 2013-05-16T13:33:08.813 回答
1

这是正常的行为.slideUp()。从doco：

该.slideUp()方法对匹配元素的高度进行动画处理。这会导致页面的下部向上滑动，似乎隐藏了项目。

或者套用一句话，就是被隐藏的元素下方的元素看起来会向上滑动。但在你的情况下，因为你有position:absolute;下面的元素比幻灯片更具“显示”效果。

如果您使用该.animate()方法更改top元素的，您可以让元素本身实际滑动：

.animate({top : -$this.height()-100}, 2000)

演示：http: //jsfiddle.net/dj2Y8/4/

出于演示的目的，我只是将动画设置top为一个足够负的位置，使其移出窗口顶部，当元素位于页面顶部时很容易，尽管-$this.height()不够高，所以我任意减去了一个额外的100. 显然，如果元素不在页面顶部，您可能需要调整它，可能同时为多个 CSS 属性设置动画。

于 2013-05-16T13:33:20.600 回答