javascript - 延迟后淡入图像

Question

我已经按照这个小提琴创建了我自己的代码，但它实际上是在毫不拖延地显示图像。请指导。

<img class="delayImg" style="width:156px;margin: 41px 0; height:37px;opacity:0px;" delayedSrc="logo_new.png"  />

$(document).ready(function() {
    $(".delayImg").each(function() {
        this.onload = function() {
            $(this).animate({opacity: 1}, 4000);
        };
        this.src = this.getAttribute("delayedSrc");
    });
});

Answer 1

添加延迟（）

 $(this).delay(4000).animate({opacity: 1}, 4000);

我想您可能对延迟和持续时间感到困惑。在动画函数中指定的数字是动画的持续时间，用于添加延迟只是.delay()在动画之前添加。

小提琴

Answer 2

你在这里有一个错误：

<img class="delayImg" style="width:156px;margin: 41px 0; height:37px;opacity:0px;" ....

---> 不透明度：0没有像素

请参阅小提琴css 代码，它是：

.delayImg {opacity:0;}