jQueryのフェードアウト後にクラスを追加して行わcompletly

Question

ここ

はコードです：

1. fadesIn

2. 右

3. にアニメーション化：ホバー時に何が欲しいのです

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

   FadesOut（fadeOut doneが左の位置をリセットするとき）

4. は再び1

に番号を繰り返し、しかし、私のコードは、それが、その後fadesOut、fadesInを... postitionをリセットさ

Answer 1

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

あなたは他のまで、いくつかのコードの実行を遅延するコールバック関数を使用することができますコードは実行が終了：あなたは条件演算子を使用していないので、またif (positionA.left = '400px)は常にtrueを返します

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

、コードは次のようになります。if (positionA.left == '400px) （またはタイプと値を一致させるには===を使用できます）。