这是一个创建于 5004 天前的主题，其中的信息可能已经有所发展或是发生改变。
用 jQuery 的 slideDown/fadeIn 等效果函数时，经常遇到显示出来的东西跳了一下，然后才开始滑动。
比如要把 display:none; 的一个东西显示出来:
$('#xxx').slideDown();
记得哪里写到过，好像用的是css的技巧。
比如要把 display:none; 的一个东西显示出来:
$('#xxx').slideDown();
记得哪里写到过，好像用的是css的技巧。
 |
1
darasion OP 自问自答吧。
经过一番研究，大概找到了这样一个原因： slideDown() 动作的终值是元素高度，这个高度不包括很多元素的 margin ，如果设置了margin-top或 margin-bottom的话，动作最后的跳动就会很厉害。去掉后就好多了。 另外，滑动动画的另外一种形式是利用 margin-top 。从负值高度起始，运动到0; 外部框架的overflow设置为hidden，这个办法滑动元素内部没有缩放隐藏动作，跳动最小，视觉上感觉最舒服。Google 实时搜索就是这样做的。 |
 |
2
sparklo 2011-04-01 16:37:05 +08:00
我也碰到过这样的问题. 像你说的,slideDown() 动作的终值是元素高度. 我的经验是问题的本质在于你需要指定你要slide的这个element的高度(by pixel),和margin无关. 需要的话这个值可以hard code也可以在page load的时候动态获得. 这似乎是jquery独有的问题, stackoverflow上有很多讨论.
这篇有详解: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/ |
|
4
darasion OP 明白大概了。
读了一下jQuery作者的书《Pro JavaScript Techniques》，有关获得尺寸的算法，确实都是按照标准来的。所以都没有把 margin 算在内，去掉所有margin就好了。 另外还发现另外一个影响尺寸计算不一样的地方，就是如果 css hack里边用到的 height:1% 存在，也会出现高度计算错误，动画跳动会很大。 另外这个问题相关： http://stackoverflow.com/questions/1335461/jquery-slide-is-jumpy |
Select Language