Question

我正在使用jQuery使用append（）动态地将表单输入添加到有序列表中，这非常有效：

$newItem = $('input[type=text]').val();

$("#toDoList").append('<li class="listItem">' + $newItem + '<div class="delete">X</div></li>');

新列表项没有问题。

但是，我想对添加的新项目使用fadeIn（）效果，但我无法使用。

我尝试了以下但没有成功：

$("#toDoList").append('<li class="listItem">' + $newItem + '<div class="delete">X</div></li>').fadeIn('slow');

知道出了什么问题吗？

Answer 1

问题是因为您首先需要隐藏元素，因为它在附加时已经可见，因此fadeIn似乎什么都不做。试试这个：

var $newItem = 'Foo';
$('<li class="listItem">' + $newItem + '<div class="delete">X</div></li>')
    .hide()
    .appendTo('#toDoList')
    .fadeIn('slow');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="toDoList"></ul>

Answer 2

fadeIn无效，因为添加新内容时会自动正常显示。如果您将附加属性的样式设置为display: none内联，如我的示例或CSS中所示，然后调用fadeIn它将起作用。请参阅以下代码段：

var newItem = $('input[type=text]').val();

$("#toDoList").append('<li style="display: none;" class="listItem">' + newItem + '<div class="delete">X</div></li>');
$("li").fadeIn("slow");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="test">
<ul id="toDoList">
</ul>

jQuery - 将.append（）与.fadeIn（）结合使用

2 个答案: