•  27-09-2022
  •  | 
  •  

Domanda

So here's my problem, I want an image to appear after a delay of 4 seconds, but this just doesn't work, can you help? Below the codes I have;

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");
});
});
È stato utile?

Soluzione

You need to load the scripts in this order:

<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>

Altri suggerimenti

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

use $(this) insted of just this

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top