jQuery追加fadeIn [英] jQuery append fadeIn

问题描述

类似于:使用fadein和追加

但是那里的解决方案对我没有用.我正在尝试:

But the solutions there aren't working for me. I'm trying:

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

但是整个列表会立即消失，而不是随着每个项目的添加而逐渐消失.似乎将hide()和fadeIn()应用于$('#thumbnails')而不是<li>.我将如何让他们申请呢?这也不起作用:

But then the whole list fades in at once, not as each item is added. It looks like hide() and fadeIn() are being applied to $('#thumbnails') not the <li>. How would I get them to apply to that instead? This doesn't work either:

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

其他建议?

推荐答案

您的第一次尝试非常接近，但是请记住，append()返回的是#thumbnails，而不是您刚刚添加的项目.相反，请先构造您的商品并应用hide().fadeIn()，然后再添加它:

Your first attempt is very close, but remember that append() is returning #thumbnails, not the item you just added to it. Instead, construct your item first and apply the hide().fadeIn() before adding it:

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

这使用美元函数提前构造<li>.当然，您也可以将其写成两行:

This uses the dollar function to construct the <li> ahead of time. You could also write it on two lines, of course, if that makes it clearer:

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

几乎也可以进行第二次尝试，但是您需要使用children()而不是filter().后者仅从当前查询中删除节点；您新添加的项目不在该查询中，而是一个子节点.

Your second attempt is also almost there, but you need to use children() instead of filter(). The latter only removes nodes from the current query; your newly-added item isn't in that query, but is a child node instead.

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

这篇关于jQuery追加fadeIn的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！