怎样让元素平滑 (没有跳动) 滑动？

[darasion]

用 jQuery 的 slideDown/fadeIn 等效果函数时，经常遇到显示出来的东西跳了一下，然后才开始滑动。

比如要把 display:none; 的一个东西显示出来:
$('#xxx').slideDown();


记得哪里写到过，好像用的是css的技巧。

[darasion]

自问自答吧。

经过一番研究，大概找到了这样一个原因：
slideDown() 动作的终值是元素高度，这个高度不包括很多元素的 margin ，如果设置了margin-top或 margin-bottom的话，动作最后的跳动就会很厉害。去掉后就好多了。


另外，滑动动画的另外一种形式是利用 margin-top 。从负值高度起始，运动到0; 外部框架的overflow设置为hidden，这个办法滑动元素内部没有缩放隐藏动作，跳动最小，视觉上感觉最舒服。Google 实时搜索就是这样做的。

[sparklo]

我也碰到过这样的问题.　像你说的,slideDown() 动作的终值是元素高度.　我的经验是问题的本质在于你需要指定你要slide的这个element的高度(by pixel),和margin无关. 需要的话这个值可以hard code也可以在page load的时候动态获得.　这似乎是jquery独有的问题, stackoverflow上有很多讨论.

这篇有详解: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/

[darasion]

@sparklo 哦。谢谢。我再研究一下。

[darasion]

明白大概了。

读了一下jQuery作者的书《Pro JavaScript Techniques》，有关获得尺寸的算法，确实都是按照标准来的。所以都没有把 margin 算在内，去掉所有margin就好了。

另外还发现另外一个影响尺寸计算不一样的地方，就是如果 css hack里边用到的 height:1% 存在，也会出现高度计算错误，动画跳动会很大。


另外这个问题相关：
http://stackoverflow.com/questions/1335461/jquery-slide-is-jumpy