我試圖讓這個背景影像在頁面加載時淡入。
我嘗試按類選擇影像并使用了 fadeIn() 方法，但加載螢屏時沒有任何反應？
我錯過了什么嗎？
// document.ready(alert("Welcome!"));
$(".background").ready(function () {
$(".background").fadeIn("slow");
});
以上是我一直在嘗試的 jQuery。
這是供參考的html：
<body>
<img class="background" src="restaurant.jpg" />
</body>
謝謝！我也是剛剛學習 jQuery 的新手..
uj5u.com熱心網友回復：
您需要首先設定您的display: none;影像
<img class="background" src="restaurant.jpg" style="display: none;"/>
然后你可以在你的 Javascript 中呼叫它
$(".background").ready(function () {
$(".background").fadeIn("slow");
});
或者像這樣
$(document).ready(function() {
$(".background").fadeIn("slow");
});
uj5u.com熱心網友回復：
// 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");
}
}
uj5u.com熱心網友回復：
- 設定顯示無
- 在 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"/>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/443848.html
標籤：javascript html