The following code works except for the jQuery part. The code makes 6 dots black and stops the interval, but does not fadeIn the div with the id "cs".
What's my mistake?
<html>
<head>
<style type="text/css">
.dot
{
background-color:#666;
width:10px;
height:10px;
border:1px solid lightgray;
margin-right:1px;
float:left;
}
body {
background:url('images/bg.png');
width:100%;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width:1000px;
position:relative;
}
#cs {
visibility:hidden;
float: left;
}
#loader {
margin-top:20px;
padding-left:10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var delayInSeconds = 0.5;
var num = 0;
var changeDot = function() {
document.getElementById('dot' + num).style.backgroundColor = "#000";
num++;
if(num == 6)
{
$('#cs').fadeIn('slow');
window.clearInterval(int);
}
};
var int = window.setInterval(changeDot, delayInSeconds * 1000);
})();
</script>
</head>
<body>
<div id="wrapper">
<div id="name">
<img src="images/as.png"/>
</div>
<div id="loader">
<div id="dot0" class="dot"></div>
<div id="dot1" class="dot"></div>
<div id="dot2" class="dot"></div>
<div id="dot3" class="dot"></div>
<div id="dot4" class="dot"></div>
<div id="dot5" class="dot"></div>
<div id="dot6" class="dot"></div>
<div id="dot7" class="dot"></div>
<div id="dot8" class="dot"></div>
<div id="dot9" class="dot"></div>
<div id="dot10" class="dot"></div>
<div id="dot11" class="dot"></div>
<div id="dot12" class="dot"></div>
<div id="dot13" class="dot"></div>
<div id="dot14" class="dot"></div>
<div id="dot15" class="dot"></div>
<div id="dot16" class="dot"></div>
<div id="dot17" class="dot"></div>
<div id="dot18" class="dot"></div>
<div id="dot19" class="dot"></div>
<div id="dot20" class="dot"></div>
</div>
<div id="cs">
<img src="images/cs.png"/>
</div>
</div>
document.getElementById('dot' + num).style.backgroundColor. Also make sure you have element with idcsanddot[1-6]var int =not throw any errors?