我想知道如何才能使淡入淡出和幻灯片效果如下：http://www.apple.com/stevejobs/如何获得这个淡入淡出和幻灯片效果？

这是一个非常酷的动画，我想知道如果这可能与jQuery？

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

2011-10-20 Nathan

的衰落只是一些CSS他们申请一个元素上：

从消息。 css（line 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轻松完成。

编辑：的元素是不能逐渐消失，他们会是从透明到白色

来源

2011-10-20 20:15:25 Nasreddine

哦，我明白了。我只是在Chrome开发工具，我看到如何添加一个新的元素和东西。谢谢您的回答。 :) – Nathan

@Nathan不客气:) – Nasreddine

取决于你想要的部分！ jQuery可以做到这一切，有些比其他人更难。查看fadeIn和fadeOut方法。下一级的评论可以用动画方法完成。

编辑基于另一个答案您的评论：

你可以抓住所有要向下移动，然后用动画的方法就可以了元素。执行以下操作：

位置的所有项目，使得第一个被隐藏
淡入的所有元素，除了第一个$（“选择：不（：第一）”）
幻灯片的所有元素向下当使用animate（）方法淡入淡出时，所有可见元素的淡入将被忽略
加载下一个项目，重复第一个项目。

来源

2011-10-20 20:08:45 Whetstone

感谢您的回答！我会做什么@Nacereddine说，但这是一个很好的小教程。谢谢:) – Nathan

所有这些都不需要，请参阅我的答案。 – jondavidjohn

为了公平jondavidjohn，我所提到的和你编码的东西是非常相似的，并且两者都可以工作。你先加载元素然后滑动，在动画之前准备好元素，而你的幻灯片会同时淡化幻灯片和淡入淡出。 – Whetstone

您可以使用jQuery淡入效果

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

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

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

来源

2011-10-20 20:09:02

这只会淡入。我知道这一点。我知道jQuery。请在页面加载后等待几秒钟，您将看到幻灯片/淡入淡出效果。 – Nathan

Working Example

基本上你必须设置元件为“梯度的元件后面几乎看不见“opacity的0.001让幻灯片起作用，然后用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); 
     }); 
    }); 
});

来源

2011-10-20 20:19:15 jondavidjohn

非常酷！尽管这不是苹果公司的做法（他们只是用一个渐变叠加了一个渐变效果，并使用了一些JS来滑动它，这是我从@Nacereddine的答案中学到的。）这是一个非常棒的jQuery代码虽然，谢谢。 :) – Nathan

如何获得这个淡入淡出和幻灯片效果？

回答

Working Example

相关问题