jQuery doesn't work in <head>?!
Posted
by
Hanz
on Stack Overflow
See other posts from Stack Overflow
or by Hanz
Published on 2011-03-08T07:46:57Z
Indexed on
2011/03/08
8:10 UTC
Read the original article
Hit count: 153
Filed under:
JavaScript
|jQuery
This code is supposed to make a slideshow out of stacked list-elements (I commented out the CSS so I can see what's going on) by fading out the topmost elements until only the first one is visible, then fade in the topmost element and the rest and start anew. If I put the script below my content inside the <body> and throw out the $(function() { it works perfectly fine, but in the <head> nothing happens. I wrote this yesterday and today I still can't see the mistake, so I'm posting it here.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul {
position: relative;
}
ul li {
/*position: absolute;
left: 0;
top: 0;*/
}
</style>
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var i = 0;
var count = $('ul li').size();
function fade() {
if (i < count-1) {
$('ul li:nth-child('+(count-i)+')').fadeOut(300);
i++;
} else {
$('ul li:nth-child('+count+')').fadeIn(300, function(){$('ul li').show();});
i = 0;
}
}
$('button').click(function() {
setInterval('fade()', 1000);
});
});
</script>
</head>
<body>
<button>Slideshow GO!</button>
<ul id="slider">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
</ul>
</body>
</html>
Thanks
© Stack Overflow or respective owner
