stop animation on mouseover jquery
<p>How to stop animation on mouseover and restart again on mouseout
I have tried the following code but it is not working:</p>

<pre><code>var containerheight = 0;
var numbercount = 0;
var liheight;
var index = 1;
function callticker() {
    jQuery("#news-container1 ul").animate({
        "margin-top": (-1) * (liheight * index)
    }

    , 2500);
    if (index != numbercount - 1) {
        index = index + 1;
    }
    else {
        index = 0;
    }
    timer = setTimeout("callticker()", 3600);
}       
jQuery(document).ready(function() {
var timer=null;
jQuery('#news-container1').height("42px");
jQuery('#news-container1').css("overflow","hidden");
    numbercount = jQuery("#news-container1 ul li").size();
    liheight = jQuery("#news-container1 ul li").outerHeight();
    containerheight = jQuery("#news-container1 ul  li").outerHeight() * numbercount;
    jQuery("#news-container1 ul").css("height", containerheight);
    timer = setTimeout("callticker()", 3600);   

jQuery("#news-container1 ul").mouseover(function(){
    clearTimeout(timer ); 

 }).mouseout(function(){
    timer = setTimeout("callticker()", 3600);   
 })

});
</code></pre>

<p>JSfiddle link <a href="http://jsfiddle.net/3Y3qq/" rel="nofollow">http://jsfiddle.net/3Y3qq/</a></p>

<p>Thanks,</p>
