Question

我使用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>

这一小块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");
    }
});

它的工作正常，但我想添加动画以使其更好。我尝试了slideDown方法，这在理论上是我想要的，但在应用于append()方法时它无法正常工作。我该怎么做？

Answer 1

您可以创建一个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 = '';
});

http://jsfiddle.net/VzHFW/

在Bootstrap List组上创建动画项目

1 个答案: