在将<li>元素添加到<ul>时应用淡入效果

Question

我想在<li>向现有列表添加新元素时应用淡入(或任何效果).示例:假设这是我现有的列表

<ul class='ul-1'>
<li class='cl'></li>
<li class='cl'></li>
<li class='cl'></li>
</ul>

现在我需要<li>在它之前添加三个元素:

<li class='cl'></li>
<li class='cl'></li>
<li class='cl'></li>

通过ajax获取并且当这些新<li>的前置列表时,我需要应用淡入效果.此外,我必须确保所有新的三个元素同时淡入.

Answer 1

尝试

$('#add').click(function(){
    $('<li />', {
        class: 'cl',
        html: idx++
    }).hide().appendTo('.ul-1').fadeIn()
})

演示:小提琴