jquery逐個淡化元素，如果超出限制，則刪除最後一個元素

Question

問題1： 我想淡化每個href或img標記，因爲它們都是加載延遲，因此看起來好像它們是分開加載的。我不知道該用，delay()，fadeToggle()或fadeIn()`

在此刻我得到的所有的人都用下面的代碼，這將一氣呵成顯示，每20秒。任何重複的圖像都不會顯示，因爲它們已經加載到數組中。

$(document).ready(function(){ 
     var existingElements= new Array(); // array of existing images 

     setInterval(function(){ 
      $.get("/helloworld", function(data){ 
       data = $.parseJSON(data); 

       for(i = 0; i < data.length; i++){ 
        if($.inArray(data[i]["id"], existingElements) == -1){ 



         var imagelinks = '<a class="removethis" href="link">' 
         +'<img src="'+data[i]["img"]+'"/> </a>'; 

         $(imagelinks).prependTo("#somediv").delay(300); 


         existingElements.push(data[i]["id"]); 


         } 

/// add limit here, see below 
        } 
       }); 
      }, 20000); 
     }); 

問題2： 股利somediv只能在20幅圖像的最大。所以如果超過20（超）圖像被引入json。我想刪除最後一組圖片，因爲上面的代碼總是會帶來新的圖像20秒後，我應該設定一個上限如下：

if(i > 20){ 
$("#somediv .removethis:last").fadeOut(); // should i use remove() 

} 

Answer 1

像這樣的東西應該做的：

var existingElements = {}; 
var somediv = $("#somediv"); 

(function loopy() { 
    $.get("/helloworld", function(data) { 
     data = $.parseJSON(data); 
     var imagelinks = []; 
     for (i = 0; i < data.length; i++) { 
      if (!existingElements[data[i]["id"]]) { 
       imagelinks.push('<a class="removethis" href="link">' + '<img src="' + data[i]["img"] + '"/></a>'); 
       existingElements[data[i]["id"]] = data; 
      } 
     } 
     // Add then all to the dom at once, hide them 
     //then find that last one and start fading in. 
     $(imagelinks.join('')).prependTo(somediv).hide().filter(":last").fadeIn("slow", fadeNext); 
     setTimeout(loopy, 20000); 
    }); 
})(); 

function fadeNext() { 
    // Fade the next image in 
    $(this).prev().fadeIn(fadeNext); 
    //If there are more than 20 images visible fade the others out 
    var more = somediv.find("img:visible:not(:animated):gt(20)"); 
    if (more.length) { 
     more.fadeOut("slow", function() { 
      $(this).remove(); 
     }); 
    } 
}