JQuery добавить класс после FADEOUT укомплектовать сделал

Question

Вот код:

<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> 

То, что я хочу, когда парения:

1. fadesIn

2. одушевляет направо

3. FadesOut (когда fadeOut done сбрасывает левую позицию)

4. затем снова повторяет номер 1.

Но мой код он сбрасывает postition затем fadesOut, fadesIn ...

Answer 1

Я создаю jsfiddle в 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); 
    }); 
}; 

Answer 2

Вы можете использовать функции обратного вызова, чтобы задержать выполнение некоторого кода до другого код завершения работы:

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

Также if (positionA.left = '400px) всегда возвращает истину, так как вы не используете условный оператор, код должен быть: if (positionA.left == '400px) (или вы можете использовать === для соответствия типа и значения).