Question

问题陈述 - 我需要创建＆amp;从我的目录中逐个动态显示多个图像，并应用变换比例（用于显示）。但是我的代码会立刻将它们展示在一起。

HTML：

<div class="images-cont">       
</div>

CSS：

a {
    border-radius: 50%;
    width: 120px;
    height: 160px;
    transform: scale(0,0); 
    transition: all 4s;
    background:no-repeat center center;
    display:inline-block;
}
a.scale{ transform: scale(1,1);}

JS：

$("document").ready(function(){ 
    var minImages = 1;   // Images are numbered from 1.jpg till 10.jpg
    var maxImages = 10; 


    for(i=1;i<=maxImages;i++){
        buildImageLink();
    }

    showImages();

    function buildImageLink(){
        var anchor = $(document.createElement('a'));
        anchor.attr('href','#').appendTo('.images-cont');
        loadImage(anchor);
    };

    function loadImage(elem){
        var f = new Image;
        var p = 'images/' + i + '.jpg';  // Location of the images directory 
        f.src = p;
        f.addEventListener("load", function() {
            elem.css({ 'background-image': 'url('+ p +')'});            
        });     
    };

    function showImages(){
        $('.images-cont a').each(function(){
            $(this).delay(1000).addClass('scale')
        })
    }
});

已经通过SO本身的一些帖子，并相应地改进了我的代码，但它仍然是相同的。我不明白我在这里缺少什么。延迟就是没有发生。

Answer 1

.delay()不适用于.addClass()，仅适用于动画队列

你想要的可能是 setTimeout 功能：

function showImages(){
    $('.images-cont a').each(function(i, el){ // `i` is Index, `el` is HTMLElement object
        setTimeout(function(){
             $(el).addClass('scale');
        }, i * 1000); // (0*1000=0; 1*1000=1000, 2*1000=2000 etc)
    })
}

此外，您可以执行以下操作代替var anchor = $(document.createElement('a'));：

var anchor = $("<a />");

甚至：

var anchor = $("<a />", {href:"#"});
/* and than just: */ anchor.appendTo('.images-cont');

此外，它建议更改顺序：

    f.addEventListener("load", function() {
        elem.css({ 'background-image': 'url('+ p +')'});            
    });  
    f.src = p; // After instantiating the load function

创造＆amp;将图像逐个显示为背景图像 - JavaScript

1 个答案: