jQuery 追加淡入答案

【问题标题】：jQuery append fadeInjQuery 追加淡入
【发布时间】：2010-11-01 23:56:59
【问题描述】：

但是那里的解决方案对我不起作用。我正在尝试：

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

其他建议？

【问题讨论】：

标签： jquery

【解决方案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 style="display:none"><img src="/photos/t/'+data.filename+'"/></li>')
    .children(':last')
    .hide()
    .fadeIn(2000);

【讨论】：

漂亮！完美运行。你不会碰巧知道如何延迟开始淡入淡出直到缩略图完成加载吧？
不是我的头顶，但是“当图像完成加载时我如何触发一个函数”对于一个单独的问题来说并不是一个坏主意。 ;-)
我知道，我只是觉得你很聪明，我们可以用一块石头杀死两只鸟 :p 哦，好吧，谷歌提供了一个解决方案。再次感谢:)
如果你手边还有这个链接，我很想看看这项技术。
感谢您的示例！这是style 不是stle :)

【解决方案2】：

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

【讨论】：

偷偷摸摸...颠倒顺序。我喜欢它。

【解决方案3】：

Ben Blank's answer 很好，但对我来说，褪色是有问题的。尝试在 添加之后 淡入：

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

【讨论】：

我完全同意，这种方法将避免会导致闪烁的一帧渲染......只是多一点技巧
谢谢 - 这为我解决了一个问题，即当同时执行它们时，即将出现的项目的布局/定位不一致。

【解决方案4】：

试试吧！

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

【讨论】：

【解决方案5】：

试试这个：

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

【讨论】：

【解决方案6】：

这是我采用的解决方案：

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 事件来等待图像在出现之前完成加载。不确定这是否是最好的方法，但它对我有用。

【讨论】：

【解决方案7】：

这行得通：

var infoszoveg = '<div class="kosarba-info" style="display:none"><div class="notice"> A termék bekerült a kosaradba! » </div></div>';

$(infoszoveg).fadeIn(500).appendTo('.kosar-ikon');

【讨论】：