javascript - 使 jquery 上加载的图像在单个图像中淡入淡出

Question

这是示例 html 结构:

<div class=container>
    <div class=green></div>
    <div class=green></div>
    <div class=green></div>
    <div class=green></div>
</div>

下面的代码有效:

 $('.container').imagesLoaded(function(){
    $('.green').find('img').fadeIn(444);
});

唯一的缺点是它会等待所有图像加载，然后同时淡入它们。我怎样才能让每个图像在完成加载后立即加载，而不是等待所有图像加载。

我已经尝试过这个，但它不起作用:

    $('.green').imagesLoaded(function(){                    
        $(this).find('img').fadeIn(444);
    });

Answer 1

我遇到了同样的问题，发现您需要将 imagesLoaded 插件绑定(bind)到 .each() 方法内的 .green ，如下所示:

$('.container').find('.green').each(function () {
    var _this = $(this);

    _this.imagesLoaded(function () {
        _this.find('img').fadeIn(444);
    });
});