как вывести изображения с помощью jquery с ajax

Question

Я запрашиваю изображения (30) из API и вместо того, чтобы загружать каждое из них прямо в DOM, я бы хотел использовать функцию fadeIn () JQuery для элегантного постепенного перехода каждого изображения в поле зрения. Не могу заставить его работать.

Нужно ли использовать 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

Примерно так бы все изображения по одному исчезали с небольшой задержкой:

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 2

укажите отображение: нет в вашем CSS для imageHolder. Никакое изображение не появится с командой добавления. Затем используйте $ (". ImageHolder"). FadeIn (), чтобы контролировать момент их появления

Answer 3

Я бы попробовал что-то в этом духе (хотя я не уверен, что это будет работать с тем, как они отображаются на вашем сайте):

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);
}

Примечание: не проверено