Jquery 在引导列表组上设置项目创建动画

我使用Bootstrap的列表组显示如下项目列表：

<ul class="list-group">
    <li class="list-group-item">Aucune catégorie</li>
        <div class="newitems"></div><br/>
        <li class="list-group-item"><input type="text" placeholder="New item" class="newcat form-control"/></li>
</ul>

Aucune catégorie

下面是jQuery的一小部分，用于添加项：

$('.newcat').bind("enterKey",function(e){
    $('.newitems').append('<li class="list-group-item">' + $(this).val() + '</li>');
});

$('.newcat').keyup(function(e){
    if(e.keyCode == 13) {
        $(this).trigger("enterKey");
    }
});

$（'.newcat'）.bind（“enterKey”，函数（e）{
$（'.newitems'）.append（'
'+$（this.val（）+'
'）；
});
$（'.newcat'）.keyup（函数（e）{
如果（e.keyCode==13）{
$（此）.trigger（“enterKey”）；
}
});

它工作得很好，但我想添加一个动画，使它更好。我尝试了

slideDown

方法，这在理论上是我想要的，但是当应用到

append（）

方法时，它不起作用。

---

如何移动？

您可以创建一个jQuery对象，然后使用

appendTo

方法而不是

append

：

$('.newcat').bind("enterKey",function(e){
    $('<li class="list-group-item">' + this.value + '</li>')
        .hide()
        .appendTo('.newitems')
        .slideDown(); // collection contains the newly created element

    this.value = '';
});

$（'.newcat'）.bind（“enterKey”，函数（e）{
$（“
”+this.value+”
）
.hide（）
.appendTo（“.newitems”）
.slideDown（）；//集合包含新创建的元素
这个值=“”；
});