的 Working Example

Question

我想知道如何制作淡出幻灯片效果：http://www.apple.com/stevejobs/

这是一个非常酷的动画，我想知道这是否可以使用jQuery？

注意：我已经知道如何淡化。我一直使用jQuery。我想要新的评论/记忆/想法下降的效果。它会向下滑动并同时消失。

Answer 1

褪色只是他们在元素上应用的一些CSS：

来自messages.css（第81行）

#messages #messageContainer #mask {
    background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 15%, #FFFFFF 92%, #FFFFFF 100%) repeat scroll 0 0 transparent;
    bottom: 0;
    height: 200px;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 1;
}

对于滚动效果，可以使用jQuery轻松完成。

编辑元素不会消失，它们会落在一个从透明到白色渐变的元素后面

Answer 2

的 Working Example

基本上，您必须使用opacity 0.001将元素设置为“几乎不可见”才能使幻灯片正常运行，然后使用fadeTo将其重新置于{{1}这是完全可见的。

1

Answer 3

取决于你想要的部分！ jQuery可以做到所有这些，有些比其他更难。请查看fadeIn和fadeOut方法。可以使用animate方法完成降级的评论。

根据您对其他答案的评论进行编辑：

您可以抓住要向下移动的所有元素，然后在其上使用animate方法。执行以下操作：

定位所有项目，使第一个项目隐藏
淡化除第一个$（“。selector：not（：first）”）
使用animate（）方法淡入时向下滑动所有元素，所有可见元素都将忽略淡入淡出
加载第一个项目的下一个项目，重复。

Answer 4

你可以使用jQuery fadeIn effect

$(selector).fadeIn('slow', function() {})

http://api.jquery.com/fadeIn/

jsFiddle：http://jsfiddle.net/ckTRh/

如何获得这种淡化和滑动效果？

4 个答案:

的 Working Example