Question

所以这是我的问题，我希望在延迟4秒后出现图像，但这不起作用，你能帮忙吗？在我的代码之下;

html（index.html）：

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
@font-face { font-family: DayZ; src: url('DayZ.ttf'); } 
h3 {
color: #961515;
font-size: 32px;
text-align: center; 
font-family: DayZ
}
</style>
<meta charset="utf-8">

<title>Welcome to DayZ</title>
<link rel="shortcut icon" href="http://dayzgame.com/assets/img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/fadein.css">


<script src="scripts/fadein.js"></script>
<script src="scripts/button_fade.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>



</head>
<body>

<audio autoplay>
<source src="intro.mp3" type="audio/mpeg">
<source src="intro.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>

<div id="vertical"></div>
<div id="logo"></div>
</div>

//this is the code for the image to display
<img class="delayImg" delayedSrc="http://i.imgur.com/XH9NTK6.png" />

</body>
</html>

CSS（fadein.css）：

.delayImg {opacity:0;}

JavaScript（button_fade.js）：

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

Answer 1

您需要按以下顺序加载脚本：

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="scripts/fadein.js"></script>
<script src="scripts/button_fade.js"></script>

Answer 2

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

使用$(this)而非this

jQuery Fade-In不工作

2 个答案: