jQuery追加fadeIn

Question

类似于:使用fadein并追加

但那里的解决方案对我不起作用.我尝试着:

 $('#thumbnails').append('<li><img src="/photos/t/'+data.filename+'"/></li>').hide().fadeIn(2000);

但是,整个列表立即淡入,而不是每个项目都添加.看起来hide()并且fadeIn()正在应用于$('#thumbnails')不是<li>.我怎样才能让他们申请呢？这也不起作用:

$('#thumbnails').append('<li stle="display:none"><img src="/photos/t/'+data.filename+'"/></li>').filter(':last').fadeIn(2000);

其他建议？

Answer 1

你的第一次尝试非常接近,但要记住它append()正在返回#thumbnails,而不是你刚刚添加到它的项目.相反,首先构建您的项目并hide().fadeIn()在添加之前应用它:

$('#thumbnails')
    .append($('<li><img src="/photos/t/'+data.filename+'"/></li>')
        .hide()
        .fadeIn(2000)
    );

这使用美元函数<li>提前构建.当然,你也可以把它写成两行,如果这样可以更清楚:

var item = $('<li><img src="/photos/t/'+data.filename+'"/></li>')
    .hide()
    .fadeIn(2000);
$('#thumbnails').append(item);

编辑:您的第二次尝试也几乎在那里,但您需要使用children()而不是filter().后者只从当前查询中删除节点; 您新添加的项目不在该查询中,而是一个子节点.

$('#thumbnails')
    .append('<li stle="display:none"><img src="/photos/t/'+data.filename+'"/></li>')
    .children(':last')
    .hide()
    .fadeIn(2000);

Answer 2

$('<li><img src="/photos/t/'+data.filename+'"/></li>')
    .appendTo('#thumbnails')
    .hide().fadeIn(2000);

Answer 3

本·布兰克的答案很好,但对我而言,褪色是微不足道的.添加后尝试淡入:

var item = $('<li><img src="/photos/t/'+data.filename+'"/></li>').hide();
$('#thumbnails').append(item);
item.fadeIn(2000);