jQueryのいずれかによって要素の1をフェードし、制限値を超えた場合は、最後の要素を削除

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枚の最大で唯一持つことができるのdiv。そうすれば、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(); 
     }); 
    } 
}