jquery .stop() queue management
<p>I'm stuck on a problem where I have two functions that seem to be breaking each other.</p>

<p>Basically i have a list of image rollover boxes who's effect works like so:</p>

<pre><code> $('.image-roll').hover(function() {
     var $this = $(this);
     $this.siblings().stop(true).animate({opacity:0.2})
     $this.children('.images').stop(true).animate({'top':'-275px'},300);
     $this.children('.textbody').stop(true).animate({'top':'-345px'},300)
 }, function() {
     var $this = $(this);
     $this.siblings().stop(true).animate({opacity:1})
     $this.children('.images').stop(true).animate({'top':'-0px'},300);
     $this.children('.textbody').stop(true).animate({'top':'-275px'},300)
 });
</code></pre>

<p>I also have some code that moves <code>.image-roll</code> elements based on scroll position that looks like this:</p>

<pre><code>$('.container').scroll(function() {
    $('.roll-container').each(function() {
        if($(this).offset().top &lt; window.innerHeight &amp;&amp; $(this).offset().top &gt; 100) {
            $(this).children('.image-roll').each(function() {
                var $this = $(this);
                setTimeout(function() {
                    $this.animate({'bottom':0,'opacity':1}) 
                },50*$this.index());
            });
        }
    });
});
</code></pre>

<p>all the <code>.image-roll</code> elements sit inside a '.roll-container` containing div. </p>

<p><strong>Problem:</strong></p>

<p>Both work perfectly individually, hover if i'm scrolling down the page and the second function executes and all the boxes start moving up if i hover over one of the boxes while they are moving it breaks clears the queue of animations that are children on the <code>.image-roll</code> element. I don't understand why this happens, as the animation queues in the hover functions should be assigned to the elements they relate to..right?</p>

<p>I think i'm just a little tired and my brain is broken but I can't get the two functions to play together nicely without creating a flag for the hover function but i'm sure there must be a nicer way of doing this.</p>

<p>Maybe I don't understand how jquery queues work entirely but why would the queque's be assigned to the '.image-roll` element rather than its children? How can I fix this up without having it suck.</p>
