Pause jQuery Animation: using hover event of another div.
<p>I have a problem of not being able to pause a jQuery.animate function on a div when I hover over the outer div. The reason I want it to stop on hover of the outer div is I am going to be overlapping the inner div with the outer div. I then want the animation to resume again on the inner div when the mouse leaves the outer div. Any help would be greatly appreciated, been stuck here for a little while now....  </p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;jQuery Practice&lt;/title&gt;

&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;

$(document).ready(function(){
    $("#listSlide ul").animate({marginTop:-800},10000, 'linear', function(){
        $(this).find("li:last").after($(this).find("li:first"));
        $(this).css({marginTop:-73});   
    })  
});

&lt;/script&gt;
</code></pre>

<p>How can I get the above jQuery animate function to pause on the outer div's(#animation) mouse hover event and resume on mouse leave of the #animation div?</p>

<pre><code>&lt;style type="text/css"&gt;

* {
    padding:0px;
    margin:0px;
}

#wrapper {
    width:960px;
    height:768px;
    margin: 0 auto;
}

#animation {
    width:260px;
    height:768px;
    float:right;
    position:relative;
}

#listSlide {
    height: 768px;
    width:200px;
    position:absolute;
    left:49px;
    overflow:hidden;
}

#listSlide ul {
    height: 700px;
}

#listSlide ul li {
    width:185px;
    text-align: center;
    height: 768px;
    list-style: none;
    float:  left;
    clear: left;
    margin-bottom:-40px;
}
&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="wrapper"&gt;

    &lt;div id-"animation"&gt;

        &lt;div id="listSlide"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;img src="images/belt.png" alt="Belt 1" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="images/belt.png" alt="Belt 2" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="images/belt.png" alt="Belt 3" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="images/belt.png" alt="Belt 4" /&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;

    &lt;/div&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;
</code></pre>
