Question

我正在寻找在页面加载时放入/淡化元素的最佳方法。

我非常喜欢当你进行搜索时它在http://alpha.musicinfo.fi/上的样子，并且内容有点滑动/淡入。

想知道他们是如何实现它的，因为它在浏览器和移动设备上非常流畅。

谢谢！

Answer 1

对于最简单的动画，您需要使用CSS3过渡which are supported on everything except 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;

Answer 2

CSS3动画可能是实现这一目标的最简单方法，但它并不是很受支持。我认为你最实际的选择，平衡易用性和浏览器支持，将使用jQuery的.fadeIn()函数。

Answer 3

这是使用jQuery的addClass函数的另一种方法。

这个例子有点难看，但是你明白了。另外，为了解决问题，请使用CSS transition等转换

还要添加多个类进行更改以折叠该框。这只是另一种方法，可能不是最好的方法，但还有另一种方法。

这是小提琴： http://jsfiddle.net/GrsXx/

CSS淡入/缓解页面加载效果

3 个答案: