jQuery 附加淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/978708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery append fadeIn
提问by mpen
Similar to: Using fadein and append
类似于：使用淡入淡出和追加
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);
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:
但是整个列表会立即淡入，而不是随着每个项目的添加而消失。它看起来像hide()并且fadeIn()正在应用于$('#thumbnails')不是<li>. 我如何让他们申请呢？这也不起作用：
$('#thumbnails').append('<li stle="display:none"><img src="/photos/t/'+data.filename+'"/></li>').filter(':last').fadeIn(2000);
Other suggestions?
其他建议？
回答by Ben Blank
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:
您的第一次尝试非常接近，但请记住append()返回的是#thumbnails，而不是您刚刚添加到其中的项目。相反，首先构建您的项目并hide().fadeIn()在添加它之前应用：
$('#thumbnails')
.append($('<li><img src="/photos/t/'+data.filename+'"/></li>')
.hide()
.fadeIn(2000)
);
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:
这使用美元函数来构建<li>提前。当然，你也可以把它写成两行，如果这样更清楚的话：
var item = $('<li><img src="/photos/t/'+data.filename+'"/></li>')
.hide()
.fadeIn(2000);
$('#thumbnails').append(item);
Edit: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.
编辑：您的第二次尝试也差不多了，但您需要使用children()而不是filter(). 后者只从当前查询中删除节点；您新添加的项目不在该查询中，而是一个子节点。
$('#thumbnails')
.append('<li stle="display:none"><img src="/photos/t/'+data.filename+'"/></li>')
.children(':last')
.hide()
.fadeIn(2000);
回答by Roman Sklyarov
$('<li><img src="/photos/t/'+data.filename+'"/></li>')
.appendTo('#thumbnails')
.hide().fadeIn(2000);
回答by Derek Illchuk
Ben Blank's answeris good, but the fading, for me, is glitchy. Try fading in afteryou append:
Ben Blank 的回答很好，但对我来说，褪色是有问题的。附加后尝试淡入：
var item = $('<li><img src="/photos/t/'+data.filename+'"/></li>').hide();
$('#thumbnails').append(item);
item.fadeIn(2000);
回答by Ogait
Try it!
尝试一下！
$('#thumbnails').append(<li> your content </li>);
$('#thumbnails li:last').hide().fadeIn(2000);
回答by Wessam El Mahdy
Try this:
尝试这个：
$('<li><img src="/photos/t/'+data.filename+'"/></li>').hide().appendTo('#thumbnails').fadeIn(2000);
回答by mpen
Here's the solution I went with:
这是我采用的解决方案：
function onComplete(event, queueID, fileObj, response, info) {
var data = eval('(' + response + ')');
if (data.success) {
$('#file-' + queueID).fadeOut(1000);
var img = new Image();
$(img).load(function () { // wait for thumbnail to finish loading before fading in
var item = $('<li id="thumb-' + data.photo_id + '"><a href="#" onclick="deletePhoto(' + data.photo_id + ')" class="delete" alt="Delete"></a><a href="#" class="edit" alt="Edit"></a><div class="thumb-corners"></div><img class="thumbnail" src="/photos/t/' + data.filename + '" width=150 height=150/></li>');
$('#thumbnails').append(item.hide().fadeIn(2000));).attr('src', '/photos/t/' + data.filename);
} else {
$('#file-' + queueID).addClass('error');
//alert('error ' + data.errno); // TODO: delete me
$('#file-' + queueID + ' .progress').html('error ' + data.errno);
}
}
}
This works with uploadify. It uses jquery's loadevent to wait for the image to finish loading before it appears. Not sure if this is the best approach, but it worked for me.
这适用于uploadify。它使用 jquery 的load事件来等待图像在它出现之前完成加载。不确定这是否是最好的方法，但它对我有用。
