如何让jQuery淡入功能正常工作?

Jordan Bendon • 4 年前 • 1315 次点击

我试图在页面加载时让背景图像淡入。

我尝试过按类选择图像,并使用fadeIn()方法,但加载屏幕时什么都没有发生?

我错过什么了吗?

// document.ready(alert("Welcome!"));

$(".background").ready(function () {
  $(".background").fadeIn("slow");
});

以上是我一直在尝试的jQuery。

以下是供参考的html:

<body>
    <img class="background" src="restaurant.jpg" />
</body>

谢谢我对jQuery也是全新的,只是学习而已。。

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/128896

文章 [ 2 ] | 最新文章 4 年前

• 1 楼

Dinesh AES 4 年前

// Alternative to load event
    document.onreadystatechange = function () {
      if (document.readyState === 'complete') {
    alert('Dom loaded');
        $(".download").fadeIn();
      }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src='https://www.w3schools.com/images/compatible_chrome.png' class='download' style='display:none;'>

首先隐藏图像,然后尝试下面加载dom后执行的代码。

// Alternative to load event
document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    console.log('loaded');
    $(".background").fadeIn("slow");
  }
}

• 2 楼

Nick Vu 4 年前

你需要树立自己的形象 display: none; 开始

<img class="background" src="restaurant.jpg" style="display: none;"/>

然后你可以在Javascript中调用它

$(".background").ready(function () {
  $(".background").fadeIn("slow");
});

或者像这样

$(document).ready(function() {
  $(".background").fadeIn("slow");
});

登录后回复