动画下一个图像元素（由 Jquery 生成）

Question

我正在混合检索我的 Flickr 相册照片，然后逐张添加属性。我成功地用这段代码获取了所有元素。基本上，它会在相册图片中逐一添加一个带有“img”类的部分。

我想为下一个“img”元素设置动画（我用不透明度进行了测试），但生成的代码似乎适用于一个巨大的“img”属性（这是合乎逻辑的，因为在加载 flickr img 之前 DOM 元素是空的.

这里要清除的是之前的HTML：

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

然后我用这个 JS/Jquery 检索我的 Flickr 元素（也许是答案 会在那里）

<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 的代码只是为了检查触发后单击“下一个 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

好吧，分配一个 id 会有所帮助...我为你准备了一个小提琴：

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

....但是哇....代码真的不可读，你真的应该重做缩进......还有，你缺少一些分号......

...可爱的小猫顺便说一句，让工作变得更容易：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/