jQuery追加fadeIn

类似于： 使用淡入淡出和追加

但那里的解决scheme并不适合我。 我尝试着：

$('#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); 

其他build议？

Answer 1

你的第一次尝试是非常接近的，但请记住append()正在返回#thumbnails ，而不是你刚添加的项目。 相反，首先构造你的项目，然后在添加之前应用hide().fadeIn() ：

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

这使用美元函数来提前构build<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); 

Answer 4

尝试一下！

  $('#thumbnails').append(<li> your content </li>); $('#thumbnails li:last').hide().fadeIn(2000); 

Answer 5

尝试这个：

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

Answer 6

以下是我的解决scheme：

 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); } } } 

这适用于uploadify 。 它使用jquery的load事件来等待图像完成加载之前，它出现。 不知道这是否是最好的方法，但它对我有用。