Animate next image element (which is generated by Jquery)

Question

I'm working on a mix of retrieving my Flickr album photos and then adding attributes image by image. I succeeded by getting all the elements with this code. Basically, it adds a section with class "img" to the album pictures one by one.

I would like to animate the next "img" element (I tested with opacity) but the code generated seems to work on one giant "img" property (which is logical because the DOM elements are empty before the flickr img are loading.

To be cleared here is the HTML before :

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

Then I retrieve my Flickr elements with this JS/Jquery (maybe the answer would be there)

<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>

Finally, with all the new "img" elements, the problem is that i would like to create event on images one by one. I tried with this code from Jquery API just to check if after a trigger click "next img" would disapear. It's not working because all the elements are not distinct so my pictures all disappear all at once :

    $(document).ready(function () {

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

Thank you for reading this long. I hope I made myself clear enough.

PS : Sorry for the kitten

I made a fiddle since It's easier to debug : http://jsfiddle.net/AYV7d/

Answer 1

well, assigning an id would help...i forked a fiddle for you:

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

just add a counter to your loading function

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

then you are able to iterate through it using a second counter:

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

....but wow....that code is really unreadable, you should really redo the indentation...also, you lack some semicoli...

...cute kiten btw, made the work go easier :D

Answer 2

You can use jQuery to choose the first un-animated element like so:

$(document).ready(function () {

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

You'll need to add the "animated" class to your original HTML so that the first section is ignored:

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

Here is a jsFiddle: http://jsfiddle.net/LbMMZ/