I'm trying to simply create text that gives the illusion of scrolling only it repeats its self over and over....i've got it working for 1 iteration but then it just moves back and forth instead of up and left. I don't quit understand if or am i going about it the wrong way?Here is the html page please help.....BTW I have it set below to always show the text setting the second fade to 0 will give the full scrolling affect. please help
[code]
<!doctype html>
<html>
<head>
<style type="text/css">
<!--
.results00{width:350px;height:14px; position:relative; top:1px; }
.results0{width:100px;height:14px; position:relative; top:1px;left:351px;opacity:0;}
.results1{width:100px;height:14px; position:relative; top:1px;}
.results2{width:100px;height:14px; position:relative; top:1px;}
.results3{width:100px;height:14px; position:relative; top:1px;}
.results4{width:100px;height:14px; position:relative; top:1px;}
.results5{width:100px;height:14px; position:relative; top:1px;}
.results6{width:100px;height:14px; position:relative; top:1px;}
.results7{width:100px;height:14px; position:relative; top:1px;}
.results8{width:100px;height:14px; position:relative; top:1px;}
.fadeblock{width:350px;height:25px;position:absolute;top:140px;
border:1px solid black;background-color:black;
}
-->
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var i=8;
var j=0;
test(i,j);
function test (i,j){
//entry point
//move left
$('.results'+j).animate({
left: '0'
}, 1000, function() {
//fade in
$('.results'+j).fadeTo('fast',1, function() {
// Animation complete
$('.results00').animate({
//move all
top: '+=16'
}, 1000, function() {
// Animation complete.
//fadout
$('.results'+i).fadeTo('fast',1, function() {
//move right
//move up
$('.results'+i).animate({
left: '351',
top: '-125'
}, 1000, function() {
i--;
var j=i+1;
if(i < 0 ){
i=8;
j=0;
}
test(i,j);
});
});
//move up
});
});
});
}
});
</script>
</head>
<body>
<div class ="results00">
<div class ="results0">test 0</div>
<div class ="results1">test 1</div>
<div class ="results2">test 2</div>
<div class ="results3">test 3</div>
<div class ="results4">test 4</div>
<div class ="results5">test 5</div>
<div class ="results6">test 6</div>
<div class ="results7">test 7</div>
<div class ="results8">test 8</div>
</div>
<div class ="fadeblock"></div>
</div>
</body>
</html>
[/code]