このフェードとスライドの効果を得るには？

Question

私は上のように、私はフェードを作成し、効果をスライド可能性がどのように思ったんだけど：それは本当にクールなアニメーションですhttp://www.apple.com/stevejobs/

と、これはjQueryを使って可能である場合、私は思ったんだけど？

注：私は既に物を消す方法を知っています。私はいつもjQueryを使っています。私は新しいコメント/思い出/思考が落ちるところで効果が欲しい。それは同時に滑り落ち、衰退する。

Answer 1

フェージングは​​、彼らが要素に適用されるだけで、いくつかのCSSです。 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

あなたが望む部分に依存します！ jQueryはそのすべてを行うことができ、いくつかは他のものよりも難しいものです。 fadeInとfadeOutメソッドを見てみましょう。レベルを下っているコメントは、アニメーションメソッドで行うことができます。別の答えにあなたのコメントに基づいて編集された

：

あなたは、あなたがそれにアニメーションの方法を使用し、その後下に移動したいすべての要素をつかむことができます。次の操作を行います（「セレクター：ありません（：最初の）」）

1. ポジションなフェードイン
2. 最初のものが隠されているすべての項目最初の1 $以外のすべての要素を
3. にスライドさせ、すべての要素をダウンanimate（）メソッドでフェードインしている間は、表示されているすべての要素でフェードが無視されます
4. 最初の要素がロードされた場合は、次の項目をロードします。

Answer 3

あなたはjQueryのフェードインエフェクトを使用することができます

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

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

jsFiddle：

をメッセージから：http://jsfiddle.net/ckTRh/

Answer 4

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); 
     }); 
    }); 
});