Làm cách nào để có hiệu ứng mờ dần và trượt này?

Question

Tôi tự hỏi làm thế nào tôi có thể tạo hiệu ứng mờ dần và trượt như trên: http://www.apple.com/stevejobs/

Đó là một hoạt hình thực sự thú vị và tôi tự hỏi liệu điều này có thể thực hiện được với jQuery không?

Lưu ý: Tôi đã biết cách làm mờ dần nội dung. Tôi sử dụng jQuery mọi lúc. Tôi muốn hiệu ứng nơi những bình luận/ký ức/suy nghĩ mới thả xuống. Nó trượt xuống và mờ dần cùng một lúc.

Answer 1

Các fading sẽ không chỉ là một số CSS họ áp dụng trên một phần tử:

Từ thông điệp. css (dòng 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; 
} 

và để có hiệu ứng cuộn, nó có thể được thực hiện dễ dàng với jQuery.

chỉnh sửa: các yếu tố không được làm sáng tỏ dần, họ sẽ đằng sau một yếu tố đó là một gradient từ trong suốt sang màu trắng

Answer 2

Phụ thuộc vào phần nào bạn muốn! jQuery có thể làm tất cả, một số khó hơn những người khác. Hãy xem xét các phương pháp fadeIn và fadeOut. Các ý kiến ​​rơi xuống một mức độ có thể được thực hiện với phương pháp animate.

sửa dựa trên nhận xét của bạn về câu trả lời khác:

Bạn có thể lấy tất cả các yếu tố mà bạn muốn di chuyển xuống sau đó sử dụng phương pháp sinh động trên đó. Làm như sau:

1. Chức tất cả các mục như vậy mà người đầu tiên được ẩn
2. fadeIn tất cả các yếu tố ngoại trừ một $ đầu tiên ("selector:. Không (: thứ nhất)")
3. Trượt tất cả các yếu tố xuống trong khi phai màu bằng phương thức animate(), phai sẽ bị bỏ qua cho tất cả các phần tử hiển thị
4. Tải mục tiếp theo ở nơi đầu tiên, lặp lại.

Answer 3

Bạn có thể sử dụng jQuery fadeIn hiệu lực thi hành

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

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

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

Answer 4

Working Example

Về cơ bản bạn cần phải thiết lập các yếu tố để " gần như vô hình "với một số opacity của 0.001 để làm cho trang trình bày hoạt động và sau đó sử dụng fadeTo để đưa nó trở lại vào 1, hiển thị hoàn toàn.

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