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： div somediv 最多只能包含 20 张图像。所以如果json传入的图片超过20张（超过）。我想删除最后设置的图像，因为上面的代码总是会在 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();
        });
    }
}