问题描述
类似于:使用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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!