jQuery 访问刚刚添加的 DOM

Question

我正在使用 jQuery 将图像添加到另一个 DOM 元素。现在我不想淡出添加的图像，但进展不太顺利，我猜是因为图像是在文档加载后添加的!？

这是我的代码

$('#t' + u).html('<img style="top: 100px;" src="'+data[dataRnd].img+'"/>').find('img').fadeOut(5000);

Answer 1

首先将 img 创建为 jQuery DOM 对象，而不是使用 html()。之后，您可以将其附加到容器中并将其淡出。

var $img = $('<img style="top: 100px;" src="'+data[dataRnd].img+'"/>');
var $container = $('#t' + u).empty();

$img.appendTo($container).fadeOut(5000);

• jsFiddle Demo
• .appendTo()
• 我用过.empty()模拟 .html()
的“清洁”效果
• Creating DOM elements from an HTML string with $()

<小时/>

会出现问题，因为动画可能会在图像加载之前开始。正如 @adaneo 正确建议的那样， .load()方法可用于在加载图像时在图像上添加事件处理程序并让其启动动画。这还有一些cross-browser issues (see Caveats) ，但您可以在几秒钟内启动动画，以防 load 事件未触发。

$img.on('load', function () {
    $(this).fadeOut(5000);
}).appendTo($container);

setTimeout(function () {
    $img.trigger('load');
}, 2000);

jsFiddle Demo