Анимировать следующий элемент изображения (который генерируется JQuery)

Question

Я работаю над сочетанием извлечения фотографий альбома Flickr, а затем добавляю атрибуты изображения по изображению. Мне удалось получить все элементы с этим кодом. В принципе, он добавляет раздел с картинкой «img» к изображениям альбома один за другим.

Я хотел бы анимировать следующий элемент «img» (я тестировал с непрозрачностью), но генерируемый код, похоже, работает с одним гигантским свойством «img» (что логично, потому что элементы DOM пусты, прежде чем flickr img . загрузка

Чтобы очистить вот HTML перед:

<div id="img"> 
    <!-- Picture container goes here --> 
    <section class="img"> 
     <!-- Img container goes here - 1 item created one section --> 
    </section> 
</div> 

Тогда я получить мои элементы Flickr с этим JS/Jquery (может быть, ответ бы там)

<script> 
    $(document).ready() 
    var apiKey = '216ef208ff620b0dfa1700e505fba309'; 
    var galeryno = '72157635214178998'; 
    $(function (flickr) { 
     $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=' + galeryno + '&format=json&jsoncallback=?', 

     function (data) { 
      $.each(data.photoset.photo, function (i, item) { 
       var photoFull = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_b.jpg'; 
       var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_t.jpg'; 
       var photoID = item.id; 
       //use another ajax request to get the tags of the image 
       $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?', 

       function (data) { 
        if (data.photo.tags.tag != '') { 
         var tagsArr = new Array(); 
         $.each(data.photo.tags.tag, function (j, item) { 
          tagsArr.push('<a href="http://www.flickr.com/photos/tags/' + item._content + '">' + item.raw + '</a>'); 
         }); 
         var tags = tagsArr.join(', '); 
        } 

        //imgCont is important i guess - maybe it's not creating the best kind of DOM element to work laterby 

        var imgCont = '<section class="img"><a href=' + photoFull + ' data-lightbox="Chaton"title=' + data.photo.title._content + '><img class="" src=' + photoFull + ' alt=""</a></section>' 

        if (data.photo.description._content != '') { 

         imgCont += '<p><span class="infoTitle">Description:</span> ' + data.photo.description._content + '</p></div></div>'; 
        } 
        $(imgCont).appendTo('#img'); 
       }); 
      }); 
     }); 
    }); 
</script> 

Наконец, со всеми новыми элементами «img» проблема заключается в том, что я хотел бы создавать событие на изображениях один за другим. Я попытался с помощью этого кода из JQuery API просто проверить, не исчезнет ли после нажатия триггер «next img». Это не работает, потому что все элементы не отличаются, так что мои фотографии все сразу исчезнуть:

$(document).ready(function() { 

     $(".top").click(function() { 
      $(".img").next().animate({ 
       opacity: 0.25, 
       left: "+=50", 
       height: "toggle" 
      }, 5000, function() {}); 
     }); 
    }); 

Спасибо за чтение этого долго. Надеюсь, я сделал себе достаточно ясно.

PS: Извините за котенка

Я сделал скрипку, так как это проще отлаживать: http://jsfiddle.net/AYV7d/

Answer 1

хорошо, присвоив идентификатор поможет ... я раздвоенный скрипку для вас:

http://jsfiddle.net/3yFsP/1/

просто добавить счетчик к вашей функции загрузки

var imgCont = '<section id="img_'+(counter++)+'" class="img">[...]</section>'; 

, то вы можете перебирать его с помощью второго счетчика:

$(".top").click(function() { 
    $("#img_"+counter2++).animate({ 
     opacity:0.25, 
     left: "+=50", 
     height: "toggle" 
    },5000); 
}); 

.... но ничего себе .... что код действительно нечитаемый, вы должны действительно переделать отступы ... также, вы отсутствие некоторых semicoli ...

... мило Китен кстати, сделали работу идти легче: D

Answer 2

Вы можете использовать JQuery, чтобы выбрать первый не-анимированный элемент, как так:

$(document).ready(function() { 

    $(".top").click(function() { 
     $(".img") 
      .not('.animated') 
      .first() 
      .addClass('animated') 
      .animate({ 
       opacity: 0.25, 
       left: "+=50", 
       height: "toggle" 
      }, 5000, function() {}); 
    }); 
}); 

Вам нужно добавить «анимированный» класс к исходному HTML, так что первый раздел игнорируется:

<div id="img"> 
    <!-- Picture container goes here --> 
    <section class="img animated"> 
     <!-- Img container goes here - 1 item created one section --> 
    </section> 
</div> 

Вот jsFiddle: http://jsfiddle.net/LbMMZ/