Question

我正在从API请求图像（30），而不是直接将每个图像加载到DOM中，我想利用JQuery的fadeIn（）来优雅地将每个图像淡入视图。无法让它发挥作用。

我是否需要使用load（）（或live（））？下面的代码用于从API获取图像，在新的div中删除它然后将其附加到#wrapper - 问题是它将它们全部转储，而我想如上所述淡化它们。

success: function(result) {
    for (var i = 0, l = 30; i < l; i++) {
        var media = result.data[i];
        var imageString = //bits for inside the div;
        var newdiv = document.createElement('div');
        newdiv.className = "imageHolder";
        newdiv.innerHTML = imageString;

        $('#wrapper').append(newdiv);
    }
}    
$('img').load(function() {
$('.imageHolder').fadeIn();
});

我确信这很简单，但我无法破解它。

编辑：认为以下可能有用。没有快乐。我很高兴要么淡出包含图像的div，要么只是淡化图像本身，只要小吸盘渐渐消失......欣赏到目前为止的建议

    success: function(result) {
        for (var i = 0, l = 30; i < l; i++) {
            var media = result.data[i];
            var imageString = '<a href="#" onClick="getBigOne(\'' + media.id + '\')"><img class="inst" src="' + media.images.thumbnail.url + '"></a>';
            $('<div class="imageHolder">')
                .append(imageString)
                .prependTo('#wrapper')
                .load(function () {
                  $(this).fadeIn();
                })
        }

Answer 1

我会尝试这些方面的东西（虽然我不确定它会如何在您的网站中显示这些内容）：

function fadeImagesIn(i) {
    $('#wrapper .imageHolder').eq(i).fadeIn(600,function() {
                                                fadeImagesIn(i+1);
                                            });
}

//ajax here
success: function(result) {
    for (var i = 0, l = 30; i < l; i++) {
        var media = result.data[i];
        var imageString = //bits for inside the div;
        var newdiv = document.createElement('div');
        newdiv.className = "imageHolder";
        newdiv.innerHTML = imageString;

        $('#wrapper').append(newdiv);
    }
    fadeImagesIn(0);
}

注意： 未经测试

Answer 2

这样的东西会逐渐淡化所有图像，但会有一点延迟：

success: function(response)
{
    var imgs = $(response.data.join('')).hide();
    $('<div class="imageHolder">')
       .appendTo('#wrapper')
       .append(imgs)
       .children('img')
       .each(function(i) {
          $(this).delay((i + 1) * 100).fadeIn();
       });
}

如果您只想让imageHolder淡入，请试试这个：

success: function(response)
{
    var imgs = $(response.data.join('')).hide();
    $('<div class="imageHolder">')
       .append(imgs)
       .appendTo('#wrapper')
       .fadeIn();
}

小提琴： http://jsfiddle.net/garreh/hrBzy/1/

Answer 3

在CSS中为imageHolder指定display：none。 append命令不会显示任何图像。然后使用$（“。imageHolder”）。fadeIn（）来控制它们出现的时刻

如何使用带有ajax的jquery淡入图像

3 个答案: