I am using the jQuery's `animate()` function along with TimeOut() to create a ticker effect.
Since the code is a bit long, and to better understand the effect, I uploaded the code to [JSBin (click to see)](http://jsbin.com/edepe4/edit). The animation works great, but I want to make it **pause** when a user hovers with a mouse. 

The most important part of the code (if you haven't gone to the JSBin link) that creates the ticker effect is:

```
var stocksTicker = function () {
    setTimeout(function () {
        $('#ticker li:first').animate({
            marginTop: '-27px'
        }, 800, function () {
            $(this).detach().appendTo('#ticker');
        });
        stocksTicker();
    }, 4000);
};
stocksTicker();​

```

I tried to make the pause effect by using the following code:

```
$('#ticker li').hover(function () {
    $('#ticker li:first').stop();
}, function () {
    stocksTicker();
});

```

but using this just messes up the whole animation ([you can view the result here](http://jsbin.com/edepe4/2/edit)).

How can I get a normal pause effect that will not mess up my animation?

Thanks!

Joel