jQuery - Using stops in a nested animation sequence to properly roll back all animations on mouseleave
<p>I've tried reading up on just how to use the stops, and looking at other answers here. Been tinkering with this snippet for too long now. I cant seem to get this animation to always be parallell. </p>

<p>Either it halts at some point or else it keeps queuing animations on the bottom lines (see code below). Either way, I cannot figure out where to put the stops to get this working properly.</p>

<pre><code>    $(".property-wrapper").hover(function(e){

    var lines = new Array();
    lines.push($(this).find(".line-top"));
    lines.push($(this).find(".line-left"));
    lines.push($(this).find(".line-right"));
    lines.push($(this).find(".line-bottom-right"));
    lines.push($(this).find(".line-bottom-left"));

    if(e.type == "mouseenter")
    {
        // Animate, starting from top, and going parallell towards the bottom. Then the bottom ones meet eachother.
        // The motion forms a square
        /*
                Index 0 starts (from main.css) on left:50%; and animates to 0 while also animating width to 100%, giving
                the illusion of it "shooting" out in both directions
                Here is a representation of the indices and their direction of animation

                &lt;---------0---------&gt;
                1                   2
                |                   |
                |                   |
                |                   |
                |4--------&gt;&lt;-------3|
        */
        $(lines[0]).animate({width:"100%", left:0}, 'fast', function(){
            $(lines[1]).animate({height:"100%"}, 'slow' , function(){
                $(lines[4]).animate({width:"50%"}, 'slow');
            });
            $(lines[2]).animate({height:"100%"}, 'slow', function(){
                $(lines[3]).animate({width:"50%"}, 'slow');
            });
        });
    }
    else
    {
        // Reverse the animation on mouseenter
        $(lines[3]).animate({width:0}, 'fast', function() {
            $(lines[2]).animate({height:0}, 'slow', function(){
                $(lines[0]).animate({width:0, left:"50%"}, 'fast');
            });
        });

        $(lines[4]).animate({width:0}, 'fast', function() {
            $(lines[1]).animate({height:0}, 'slow');
        });
    }
});
</code></pre>

<p>Hope anyone can help! 
Thanks</p>

<p>Edit: Here is basically how it is set up:</p>

<pre><code>        &lt;div&gt;
            &lt;div class="line-top"&gt;&lt;/div&gt;
            &lt;div class="line-left"&gt;&lt;/div&gt;
            &lt;div class="line-right"&gt;&lt;/div&gt;
            &lt;div class="line-bottom-right"&gt;&lt;/div&gt;
            &lt;div class="line-bottom-left"&gt;&lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>And here is the CSS. The line div's parent is positioned relative, and the lines are absolute to control the position relative to the parent.</p>

<pre><code>    .line-top, .line-left, .line-right, .line-bottom-right, .line-bottom-left 
   {    background:red; position:absolute; }
    .line-top { height:1px; width:0; left:50%; top:0; }
    .line-left { width:1px; height:0; left:0; top:0; }
    .line-right { width:1px; height:0; right:0; top:0; }
    .line-bottom-right { height:1px; width:0; right:0; bottom:0; }
    .line-bottom-left { height:1px; width:0; left:0; bottom:0; }
</code></pre>
