I've written these 2 JQuery functions which are supposed to take 9 blocks with IDs set from "C1" to "C9" and scroll them upwards until they reach the top and then each block that reaches the top should go back and start again. The strange thing is each time they start over the space between the blocks gets larger until everything gets messed up. I'm new to JQuery and I would appreciate any help or even better ideas on how I should do this. This is the code:
<html>
<head>
<title>Some JQuery Practice</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="style1.css" type="text/css">
<style>
#BOX{
position:absolute;
width:700px;
height:200px;
top:100px;
overflow:hidden;
background-color:#D3C79D;
-moz-border-radius:30px;
}
.content{
font-family:Tahoma;
font-size: 11px;
position:relative;
width:660px;
top:200px;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
function OneGoesUp(target){
if(target.position().top == 0){
target.css({"top":"270"});
}
target.animate({
"top": "-=1"
}, 10, function(){OneGoesUp(target)});
}
function GoUp(){
for(var i=1;i<10;i++){
var str = "#c";
str += i;
$(str).text(str);
OneGoesUp($(str));
}
}
</script>
</head>
<body onload="GoUp();">
<div id="BOX">
<div id="c1" class="content"><p>Lorem ipsum</p></div>
<div id="c2" class="content"><p>Lorem ipsum</p></div>
<div id="c3" class="content"><p>Lorem ipsum</p></div>
<div id="c4" class="content"><p>Lorem ipsum</p></div>
<div id="c5" class="content"><p>Lorem ipsum</p></div>
<div id="c6" class="content"><p>Lorem ipsum</p></div>
<div id="c7" class="content"><p>Lorem ipsum</p></div>
<div id="c8" class="content"><p>Lorem ipsum</p></div>
<div id="c9" class="content"><p>ghghjghjghj</p></div>
</div>
</body>
</html>
The GoUp() function gets called once and that's when the page loads. Do I have to use the Cycle plugin for such an effect? Thanks in advance.