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>