图像延迟后褪色

Fadein image after a delay

本文关键字:褪色 延迟 图像      更新时间:2023-09-26

我遵循这个规则并创建了我自己的代码,但它实际上没有延迟地显示图像。请指导。

<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");
    });
});

添加延迟()

 $(this).delay(4000).animate({opacity: 1}, 4000);
我想你可能混淆了延迟和持续时间。动画函数中指定的数字是动画的持续时间,要添加延迟,只需在animate前添加.delay()

小提琴

这里有一个错误:

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

-> opacity: 0 without px

查看CSS代码,它是:

.delayImg {opacity:0;}