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

Question

我想知道如何制作像这样的淡入淡出和滑动效果：http://www.apple.com/stevejobs/

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

注意：我已经知道如何淡入内容。我一直在使用 jQuery。我想要新的 cmets/memories/thoughts 下拉的效果。它同时向下滑动和消失。

Answer 1

取决于你想要它的哪一部分！ jQuery 可以做到这一切，有些比其他的更难。看看fadeIn 和fadeOut 方法。 cmets下降一个级别可以使用animate方法完成。

根据您对另一个答案的评论进行编辑：

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

1. 放置所有项目以隐藏第一个项目
2. 淡入除第一个元素之外的所有元素 $(".selector:not(:first)")
3. 使用 animate() 方法淡入时向下滑动所有元素，所有可见元素的淡入将被忽略
4. 在第一个项目的位置加载下一个项目，重复。

Answer 2

你可以使用jQuery的fadeIn效果

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

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

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

Answer 3

褪色只是他们在元素上应用的一些 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 4

Working Example

基本上，您必须使用0.001 的opacity 将元素设置为“几乎不可见”，以使幻灯片正常工作，然后使用fadeTo 将其带回完全可见的1。

$(function() {

    $('#button').click(function() {
        // new element to be added to top of list hidden
        var $new_li = $('<li style="display:none;">New Item</li>');

        // make element "almost" invisible
        $new_li.css('opacity', '0.001');

        // add it to list
        $('.list').prepend($new_li);

        // slide the "almost" invisible element down 
        // (shifting all others down)
        $new_li.slideDown('slow', function() {

            //once done sliding, trigger fade
            $new_li.fadeTo('slow',1);
        });
    });
});