I'm looking for the best way to ease-in/fade elements on page load.
I really like how it looks on http://alpha.musicinfo.fi/ when you do a search and the contents kinda slide/fade in.
was wondering how they are achieving it as it's working pretty slick across browsers and mobile.
Thanks!
对于最简单的动画，您将需要使用 CSS3 过渡，除 opera mobile 之外的所有设备都支持该过渡。
transition: top 0.2s ease-in, opacity 0.2s ease-in
-webkit-transition: top 0.2s ease-in, opacity 0.2s ease-in
opacity: 0.0;
position: relative;
top: 20px;
然后使用 javascript 或 jQuery，您可以在加载时设置新状态。
$('#element').css({opacity: 1.0, top: '0px'})
但为了获得最大的灵活性和控制力，您需要使用 jQuery 的.animate()功能。然后你可以做类似的事情
$('#element').animate({
opacity: '1.0',
top: '0px'
}, 200)
将默认 CSS 设置为opacity: 0; top: 20px; position: relative;
CSS3 动画可能是实现这一点的最简单和最简单的方法，但它并没有得到很好的支持。我认为您最现实的选择是使用 jQuery 的.fadeIn()功能，即实现易用性和浏览器支持之间的平衡。
这是使用 jQueryaddClass函数的另一种方法。
这个例子有点难看，但你明白了。transition还可以使用 CSS3 过渡等来平滑处理。
还要添加多个类来更改折叠框。这只是另一种方法，也许不是最好的，但仍然是另一种方法。
这是小提琴：http: //jsfiddle.net/GrsXx/