jQuery追加fadeIn

97

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

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

— 彭
source

199

您的第一次尝试非常接近，但是请记住，这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 stle="display:none"><img src="/photos/t/'+data.filename+'"/></li>')
    .children(':last')
    .hide()
    .fadeIn(2000);

— 本·布兰克
source

1

美丽！完美运作。您不会碰巧知道如何延迟开始淡入淡出，直到缩略图完成加载了，对吗？

— mpen

对于一个单独的问题，并不是不是浮想联翩，但是“如何在图像加载完成后触发功能”并不是一个坏主意。;-)

— Ben Blank

我知道，我只是以为您很聪明，可以用一块石头杀死两只鸟：p哦，谷歌提供了一种解决方案。再次感谢:)

— mpen

如果您仍然可以轻松使用该链接，那么我很想看看该技术。

— 本·布兰克

1

谢谢你的例子！它style不是 stle :)

— msroot

45

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

— 罗曼·斯基利亚罗夫（Roman Sklyarov）
source

4

偷偷摸摸...撤销订单。我喜欢。

— mpen 2011年

30

本·布兰克（Ben Blank）的回答很好，但是对我来说，褪色是小故障。追加后尝试淡入：

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

— 德里克·伊尔丘克（Derek Illchuk）
source

1

我完全同意，这种方法可以避免会导致闪烁的一帧渲染...多一点技巧

— Paul Carroll

谢谢-这为我解决了一个小问题，即同时进行两项操作时，即将出现的项目的布局/位置不一致。

— frax 2015年

3

试试吧！

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

— 奥盖特
source

2

试试这个：

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

— 韦萨姆·艾尔·马赫迪
source

0

这是我使用的解决方案：

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事件来等待图像完成加载，然后再显示。不知道这是否是最好的方法，但是它对我有用。

— 彭
source