Question

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

这是我的代码

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

Answer 1

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

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

Answer 2

你这样做的方式应该可以正常工作，但应检查图像加载，如下所示：

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

FIDDLE

Answer 3

bazmegakapa的回答非常好，我会自己去做，但这是另一种方式：

一旦加载了文档（并且已经运行了附加到该事件的脚本），之后添加的任何HTML都不能预先用于脚本。

因此我还有两种方法可以选择一个尚不存在的元素：

您可以使用.on()将处理程序绑定到尚不存在的元素。这不是我所知道的，但这可能会有所帮助： http://api.jquery.com/on/

另一种方法是等到你在将处理程序绑定到它之前添加HTML - 例如：

$(function(){
    //i run when the doc loads
    $.get('someurl', function(data){
        $('body').append('<img src="'+data+'" id='myNewElem'/>');
        //I run after the element is added to the DOM, so I can select it here
        $('img#myNewElem').fadeOut();
    });
});

我再次亲自接受上一个答案，这些只是你可以做同样事情的其他方法。

编辑：

与您更相关的第三个选项是将load（）事件附加到您添加到页面的图像中，并在图像完成加载后将其淡出。

示例：

$('#elem').html('<img src="someSrc" id="myImage">');
$('#myImage').load(function(){
    $(this).fadeOut();
});

这可以防止在图像在页面上显示之前发生淡入淡出。

希望这有帮助

jQuery访问刚刚添加的DOM

3 个答案: