如何使用jquery淡入div？

Question

當我點擊這個小提琴上的「加載更多」按鈕時，如何在新div上添加淡入淡出效果（緩慢下降效果）？

http://jsfiddle.net/XBNQC/10/

$(function(){ 
    $("div").slice(0, 10).show(1); // select the first ten 
    $("#load").click(function(e){ // click event for load more 
     e.preventDefault(); 
     $("div:hidden").slice(0, 10).show(200); // select next 10 hidden divs and show them 
     if($("div:hidden").length == 0){ // check if any hidden divs still exist 
      alert("No more divs"); // alert if there are none left 
     } 
    }); 
}); 

Answer 1

使用.fadeIn()或.slideDown()

$("div:hidden").slice(0, 10).fadeIn();//or .slideDown(); 

Fiddle Demo或Fiddle Demo

Answer 2

您可以使用.slideDown和PAS以毫秒爲單位的時間。

$("div:hidden").slice(0, 10).slideDown(1000); 

Js Fiddle Demo

Answer 3

使用fadeIn與slow作爲第一個參數：

$("div:hidden").slice(0, 10).fadeIn('slow'); 

Demo

jQuery fadeIn Documentation

現在我看了slowly coming down effect，所以我想也許你不想要fadeIn效果，但是slideDown效果呢？那麼，jQuery有該功能，也：

$("div:hidden").slice(0, 10).slideDown('slow'); 

與 slow作爲第一個參數

再次。

Demo

Documentation on slideDown

你甚至可以同時做這些：

$("div:hidden").slice(0, 10) 
    .css('opacity', 0) 
    .slideDown('slow') 
    .animate({ 
    opacity: 1 
}, { 
    queue: false, 
    duration: 'slow' 
}); 

Demo