Question

Here is the code:

<style>
#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; }
</style>


<div class="container">
<div id="box1"></div>
</div>

<script>
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();
});
</script>

What I want is when hover:

1. fadesIn

2. animates to right

3. FadesOut (when fadeOut done resets left position)

4. then again repeats to number 1.

But my code is it resets postition then fadesOut, fadesIn …

Answer 1

I create jsfiddle at http://jsfiddle.net/SdS68/

var animateMe = function(targetElement, speed){
    $(targetElement).css({ left: '200px' }).fadeIn(1000, function() {
        $(targetElement).animate({
            'left': '400px'
        }, {
            duration: speed,
            complete: function() {
                $(this).fadeOut(1000, function() {
                    animateMe(this, speed);
                })
            }
        }).fadeOut(1000);
    });
};