Question

我有以下jsfiddle：

我想知道如何让'on click'平滑过渡，然后逐渐显示在页面上，而不是瞬间显示？

任何帮助非常感谢，小提琴的代码如下。

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

我正在隐藏按钮，因此它会再次显示“文本”的文本

Answer 2

就像将持续时间传递给.show（）方法一样简单：

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

请参阅有关show方法的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就像魔术一样！

点击，平滑过渡显示表格

3 个答案: