Hi there,
I'm trying to write a news ticker script that horizontally slides 1
item from right to left in a box. Most news ticker scripts use
multiple items for this, but my needs are somewhat different.
Well I've kinda got it working, except for when I hover over it. Then
when the cursor goes away, the speed's been affected as well as the
item stops ticking by. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>jQuery news ticker test</title>
<style type="text/css" media="screen">
#newsticker {
width: 198px;
border: 1px solid #999;
overflow: hidden;
height: 20px;
padding: 2px;
font: 12px Arial #000;
}
#newsticker ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 600px;
position: relative;
}
#newsticker ul li {
display: inline-block;
margin: 0px 5px;
position: absolute;
left: 200px;
}
</style>
<script src="jquery-1.3.1.js" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
function scroller() {
$('#newsticker ul li').animate(
{left: "-200px"},
2000,
"linear",
function(){
$(this).css("left", "200px");
scroller();
}
)
.hover(
function(){
jQuery(this).stop()
},
function(){
$(this).css("left", 200 -
$(this).position().left);
scroller();
});
};
scroller();
});
</script>
</head>
<body onload="">
<div id="newsticker">
<ul>
<li>testing 1 - <a href="test.html">test</a></li>
</ul>
</div>
</body>
