顯示形式，平穩過渡

Question

我有以下的jsfiddle：

http://jsfiddle.net/tz52u/9/

我不知道我該怎麼做「上點擊」平穩過渡，所以它在頁面上逐漸顯示，而不是瞬間？

非常感謝任何幫助，小提琴的代碼如下。

[HTML]

<div class="row no-show"> 
         <p class="left-a"> 
          <label for="manufacturer">Manufacturer</label> 
          <input type="text" name="manufacturer" id="manufacturer" value="" /> 
         </p> 
         <p class="middle-a"> 
          <label for="product_code">Product Code</label> 
          <input type="text" name="product_code" id="product_code" value="" /> 
         </p> 
         <p class="middle-b"> 
          <label for="condition">Condition</label> 
          <select name="condition"> 
           <option value="">Please Select</option> 
           <option value="newsealed">New & Sealed</option> 
           <option value="tattybox">Tatty Box</option> 
           <option value="openbox">Opened Box</option> 
           <option value="openbag">Opened Bag</option> 
          </select> 
         </p> 
         <p class="right-a"> 
          <label for="quantity">Qty</label> 
          <input type="text" name="quantity" id="quantity" value="" /> 
         </p> 
        </div> 
        <button id="show" class="button purple">Add More Products</button> 

[jQuery的]

$("#show").click(function(){ 
     console.log("Button clicked!"); 
    $(".no-show").show(); 
    }); 

[CSS]

.no-show{display:none;} 

Answer 1

你可以做這樣的事情：

$("#show").click(function(){ 
    console.log("Button clicked!"); 
    $(".no-show").fadeIn(1500); 
    $("#show").hide(); 
    $("#show").fadeIn(1500); 
}); 

我又隱藏按鈕，以便它與文本再度出現了「smotthness」

Answer 2

這是因爲經過一段時間，以在.show（）方法簡單：

$(".no-show").show(5000); 

見jQuery的有關文檔顯示方法：http://api.jquery.com/show/

Answer 3

玩弄你搗鼓5分鐘後我最好的建議是：

$("#show").click(function(){ 
    console.log("Button clicked!"); 
    $(".no-show").slideToggle(2000); 
    $("#show").delay(2000).fadeOut(150).fadeIn(150); 
}); 

jQuery是LIK魔法！