jQuery add a class after fadeOut completly done
<p>Here is the code: </p>

<pre><code>&lt;style&gt;
#box1, #box2, .container { position: absolute; top: 0px;z-index:10; height: 50px; }
#box1 { background-color: #ff0000; width: 100px; left: 200px; }
.container { width: 640px; overflow: hidden; height: 50px; background-color:#000; color:#FFF; }
&lt;/style&gt;


&lt;div class="container"&gt;
&lt;div id="box1"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
var animateMe = function(targetElement, speed){
    var position = $(targetElement).position();
    var positionA = $(targetElement).position();
    if(positionA.left = '400px'){
        $(targetElement).fadeIn(1000).css({left:'200px'});
    };
    //animate
    $(targetElement).animate(
        {
        'left': '400px'
        },
        {
        duration: speed,
        complete: function(){
            animateMe(this, speed);
            }
        }
    ).fadeOut(1000);
};

$('.container').hover(function(){
    animateMe($('#box1'), 2000);
},
function(){
    $('#box1').stop();
});
&lt;/script&gt;
</code></pre>

<p>What I want is when hover:</p>

<ol>
<li><p>fadesIn</p></li>
<li><p>animates to right </p></li>
<li><p>FadesOut (when fadeOut done resets left position)</p></li>
<li><p>then again repeats to number 1.</p></li>
</ol>

<p>But my code is it resets postition then fadesOut, fadesIn ...</p>
