動畫下一個圖像元素（它是由Jquery生成的）

我正在檢索我的Flickr專輯照片，然後通過圖像添加屬性圖像。通過使用此代碼獲取所有元素，我成功了。基本上，它會逐個爲專輯圖片添加一個類爲「img」的部分。動畫下一個圖像元素（它是由Jquery生成的）

我想動畫生成的下一個「IMG」元件（I不透明度測試），但代碼似乎在一個巨大的「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>

然後我找回我的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/

來源

2013-08-26 Maikeximu

好，分配一個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); 
});

....但哇....代碼確實是不可讀的，你真的應該重新壓痕......也，你缺乏一些semicoli ...

...可愛的小貓咪順便說一句，做的工作更容易去：d

來源

2013-08-26 14:35:53

謝謝您的意見。如果我需要在以後處理img，創建迭代更加靈活。謝謝。對於代碼，對不起，我去http://jsbeautifier.org/看到的區別，是的，我知道縮進是重要的。 – Maikeximu

您可以使用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/

來源

2013-08-26 14:55:31 zigdawgydawg

動畫下一個圖像元素（它是由Jquery生成的）

回答

相關問題