SlideDown（）不適用於jQuery中的After（）

Question

我想將一個元素添加到列表中，並希望它在添加時向下滑動。 但是使用after()方法不起作用。 為什么？

HTML代碼：

<ul id="myUL">
 <li> First Item <li>
 <li> Second Item <li>
 <li> Third Item <li>
 <li> Fourth Item <li>

加

js代碼：

$('#add').click(function(e){
  e.preventDefault();     
  $('li:last').after('<li> A New Item </li>').slideDown("slow");
});

小提琴完整代碼： http ： //jsfiddle.net/gxs46L0u/

Answer 1

首先，您需要關閉這些li標簽。 HTML：

<ul id="myUL">
  <li> First Item </li>
  <li> Second Item </li>
  <li> Third Item </li>
  <li> Fourth Item </li>
</ul>

然后對於js，這是一種快速而骯臟的方法：

$('#add').click(function(e){
  e.preventDefault();     
  $('li:last').after('<li style="display:none"> A New Item </li>');
  $('li:last').slideDown("slow");
});

您添加了一個元素而不顯示它，並且在下一步中，slideDown將使其出現。

Answer 2

嘗試這個：

Jsfiddle： http : //jsfiddle.net/sw9yLdt7/

<ul id="myUL">
  <li> First Item </li>
   <li> Second Item </li>
   <li> Third Item </li>
   <li> Fourth Item </li>
</ul>
<a id="add" href="#">Add</a>

使用此jQuery：

$('#add').click(function(e){
    e.preventDefault();     
    $('<li> A New Item </li>').appendTo('#myUL').hide().slideDown();
});

Answer 3

演示

<ul id="myUL">
  <li> First Item </li>
  <li> Second Item </li>
  <li> Third Item </li>
  <li> Fourth Item </li>
</ul>
<a id="add" href="#">Add</a>

$('#add').click(function(e) {
  e.preventDefault();
  $('#myUL').append('<li> A New Item </li>');
});

問題是您的HTML未正確關閉，請關閉它們並使用附加