stop animation once hover

[robert_gsfame]

i really wish to stop the animation once onmouseover and start the animation again when onmouseout...

below is the code

<script type="text/javascript">

$(document).ready(function(){
	
	var first = 0;
	var speed = 100;
	var pause = 3500;
	
 interval = setInterval(removeFirst, pause);

	
		function removeFirst(){
			first = $('ul#listticker li:first').html();
			$('ul#listticker li:first')
			.animate({opacity: 10}, speed)
			.fadeOut('slow', function() {$(this).remove();});
			addLast(first);
		}
		
		function addLast(first){
			last = '<li style="display:none">'+first+'</li>';
			$('ul#listticker').append(last)
			$('ul#listticker li:last')
			.animate({opacity: 1}, speed)
			.fadeIn('slow')
		}
	
	
	
});
</script>

thx in advance

[azoomer]

Maybe something like this will get you a little closer

<script type="text/javascript">
$(document).ready(function(){
	
	var first = 0;
	var speed = 100;
	var pause = 3500;
	

	var runTicker = setInterval(removeFirst, pause);	

                $(function () {		   
                $('#listticker').hover(function () {
                clearInterval(runTicker);
	        }, function () {
                runTicker =  setInterval(removeFirst, pause);
	            });
               }); 

	
		function removeFirst(){
			first = $('ul#listticker li:first').html();
			$('ul#listticker li:first')
			.animate({opacity: 10}, speed)
			.fadeOut('slow', function() {$(this).remove();});
			addLast(first);
		}
		
		function addLast(first){
			last = '<li style="display:none">'+first+'</li>';
			$('ul#listticker').append(last)
			$('ul#listticker li:last')
			.animate({opacity: 1}, speed)
			.fadeIn('slow')
		}	
	
});
</script>