Javascript 单击即可显示表单，平滑过渡

我有以下JSFIDLE：

我想知道如何使“点击”平稳过渡，使其逐渐显示在页面上，而不是瞬间显示

非常感谢您的帮助，小提琴的代码如下

[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>

[css]

---

你可以这样做：

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

---

我正在隐藏按钮，以便它再次与文本合并，以获得smotthness

它只需将持续时间传递给.show方法即可：

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

---

请参阅jQuery文档中关于显示方法的内容：

在摆弄您的小提琴5分钟后，我的最佳建议是：

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

---

jQuery就像魔术一样

或者您可以进行淡出，淡出结束后，这很好，是否可以单击按钮，然后以相同的方式关闭项目？您可以使用.toggle函数而不是上面示例中的.fadeIn。可以找到.toggle函数的文档，包括示例。$.no-show.slideToggle；-或者fadeIn，我想这是一个品味的问题..使用jQuery函数fadeIn来解决这个问题，看看我认为如果你使用切换而不是仅仅显示更好。。。

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

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