JQuery 追加 fadeIn - 开卷题库

小开

最佳答案

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:

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

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.

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

小开

Ben Blank's answer is good, but the fading, for me, is glitchy. Try fading in after you append:

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

小开

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

小开

Try it!

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

小开

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 load event to wait for the image to finish loading before it appears. Not sure if this is the best approach, but it worked for me.

小开

Try this:

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

小开

This works:

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