jQuery 图像不淡入

Question

我有一个 JSON 格式的图像 URL 列表，我用它来将一堆图像放在一个 div 中。它们以不透明度 0 开始，它们应该使用 for 循环淡入。

这是 jQuery:

$.ajax('http://thesabreslicer.site.nfoservers.com/thesabreslicer/dw/json/imgs.json').done(function(data) {
    for (var i = 0; i < data.length; i++) {
        var image = data[i];
        $('#imgs').append('<img src="' + image.url + '" class="img-responsive" style="float:left; padding:5px;opacity:0;">');
    }
    var imgs = $('#imgs > img');
    for (var i = 0; i < imgs.length; i++) {
        if (imgs.eq(i).css('opacity') === 0) {
            imgs.eq(i).animate({
                'opacity': '1'
            }, 1000);
        }
    }
});

这是 HTML div:

<div class="col-md-4">
    <div class="text-center">
        <h3>Technologies We Use</h3>
    </div>
    <div id="imgs" class="col-md-12">

    </div>
</div>

Answer 1

这里有一些东西。首先，确保您没有尝试跨不同域使用 AJAX，否则它可能会被阻止。

其次，不需要二次循环。我会像下面那样组合它:

$.ajax('http://thesabreslicer.site.nfoservers.com/thesabreslicer/dw/json/imgs.json').done(function (data) {
    for (var i = 0; i < data.length; i++) {
        var image = data[i];
        var newImg = $('<img src="' + image.url + '" class="img-responsive" style="float:left; padding:5px;opacity:0;" />');
        $('#imgs').append(newImg);
        newImg.animate({
            'opacity': '1'
        }, 1000);
    }
});

另一件需要注意的事情是您使用的是 1000(1 秒)，因此很难看到。将其更改为更高的值以查看更好的结果。

您可能还想在淡入淡出之前检查图像是否已加载。你可以这样做:

newImg.load(function(){
   newImg.animate({
      'opacity': '1'
   }, 1000);
});