Home/ Questions/Q 7179685
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T17:11:24+00:00

I’m looking to make an image sprite fade in after a certain amount of

  • 0

I’m looking to make an image sprite fade in after a certain amount of time. (please see code below)

The image sprite has CSS attributes such as hover, active, href.
Then I added jquery src and code. The sprite hover, active, href work, but the jquery delay does not.

How do I make all of these work together?

Thanks for any help you can give!

K

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">

<style type="text/css">
html, body {margin:0px;}

a.LaunchCourse {
background: url(images/LaunchCourse.png) no-repeat 0 0;
display: block;
margin-left: auto;
margin-right: auto;
width: 188px;
height: 60px;
}

a.LaunchCourse:hover{
background-position: 0px -60px;
}

a.LaunchCourse:active{
background-position: 0px -120px;
}

</style>


<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$('.LaunchCourse').delay(1500).fadeIn(1500);
});
</script>


</head>

<body>

<a class="LaunchCourse" href="wbt.htm" ></a> 

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think what you might want to try is putting this:

    $('.LaunchCourse').hide();
setTimeout(showImage, 5000);

function showImage() {
    $('.LaunchCourse').fadeIn(1000);
}

    instead of this:

    $('.LaunchCourse').delay(1500).fadeIn(1500);

    That way, you start by hiding the image… and then you just fade in with however much delay you want in that fadeIn(number) part.

    • 0