我如何讓這個 jQuery 淡入淡出 function 工作？

Question

我試圖讓這個背景圖片在頁面加載時淡入。

我已經嘗試通過 class 選擇圖像並使用 fadeIn() 方法但是加載屏幕時沒有任何反應？

我錯過了什么嗎？

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

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

以上是我一直在嘗試的jQuery。

這是 html 供參考：

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

謝謝。 我也是 jQuery 的新手，只是在學習..

Answer 1

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

Answer 2

您需要設置圖像display: none; 原來

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

然后你可以在你的 Javascript 中調用它

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

或者像這樣

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

Answer 3

設置不顯示
在 fadeIn 中設置毫秒超時。

 $(document).ready(function() { $('.background').css("display", "none").fadeIn(5000); // 5 Second });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img class="background" src="https://picsum.photos/200/300"/>

我如何讓這個 jQuery 淡入淡出 function 工作？

問題描述

3 個解決方案

解決方案1
0 2022-03-15 04:48:29

解決方案2
0 已采納 2022-03-15 05:05:39

解決方案3
0 2022-03-15 07:01:12

我如何讓這個 jQuery 淡入淡出 function 工作？

問題描述

3 個解決方案

解決方案1 0 2022-03-15 04:48:29

解決方案2 0 已采納 2022-03-15 05:05:39

解決方案3 0 2022-03-15 07:01:12

解決方案1
0 2022-03-15 04:48:29

解決方案2
0 已采納 2022-03-15 05:05:39

解決方案3
0 2022-03-15 07:01:12