jQuery not showing image on click
Can anyone advise on whats wrong here? all the images appear after button
click apart from div6 which doesnt show at all? Have I got code wrong on
dix6 somewhere, any help much appreciated!
Many thanks!
<!DOCTYPE html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(window).load(function () {
$("button").click(function () {
$("#div1").fadeIn();
$("#div2").fadeIn(2000);
$("#div3").fadeIn(3000);
$("#div4").fadeIn(5000);
$("#div5").fadeIn(7000);
$("#div6").animate({ left: '250px' });
});
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br />
<br />
<div id="div1"style="display: none">
<a href="http://www.stackoverflow.com" title="go to link">
<img src="/images/myimage1.png" alt="about" width="150" height="75"
/></a>
</div>
<div id="div2" style="display: none">
<a href="http://www.stackoverflow.com" title="go to link">
<img src="/images/myimage2.png" alt="about" width="150" height="75"/></a>
</div>
<div id="div3" style="display: none">
<a href="http://www.stackoverflow.com" title="go to link">
<img src="/images/myimage3.png" alt="about" width="150" height="75"/></a>
</div>
<div id="div4" style="display: none">
<a href="http://www.stackoverflow.com" title="go to link">
<img src="/images/myimage4.png" alt="about" width="150" height="74"/></a>
</div>
<div id="div5" style="display: none">
<a href="http://www.stackoverflow.com" title="go to link">
<img src="/images/myimage5.png" alt="about" width="150" height="75"/></a>
</div>
<div id="div6" style="display: none">
<a href="http://www.stackoverflow.com" title="go to link">
<img src="/images/myimage6.png" alt="about" width="150" height="75"/></a>
</div>
</body>
No comments:
Post a Comment