代码之家 › 专栏 › 技术社区 › mpen

jquery附加fadein

jquery

mpen · 技术社区 · 16 年前

但是那里的解决方案对我来说不起作用。我正在努力:

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

其他建议?

6 回复 | 直到 6 年前

188

robsch YaakovHatam 6 年前

你的第一次尝试非常接近,但记住 append() 正在回归 #thumbnails ,而不是刚刚添加到其中的项。相反,首先构建项目并应用 hide().fadeIn() 添加前:

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

它使用dollar函数构造 <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);

sorx00 14 年前

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

Community CDub 8 年前

Ben Blank's answer 是好的,但对我来说,衰退是浮华的。尝试褪色之后你追加:

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

Vaibhav Bhanushali 12 年前

试试看!

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

Wessam El Mahdy Narendra gudapati 9 年前

试试这个:

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

mpen 11 年前

以下是我使用的解决方案:

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 事件以等待图像在显示之前完成加载。不确定这是否是最好的方法,但它对我有效。