jQuery - 属性が削除されないのはなぜですか？ .removeAttr

Question

私は私の問題を実証するためのフィドルを作成しました：http://jsfiddle.net/motocomdigital/QyhpX/5/

概要

私はjQueryの.animate機能を使用して、タブ付きのWebサイトを作成しています。私のライブサイトでは最初の交替で不思議そうだが、私はそれをフィドルで再現することはできない。

左のタブが0に戻って-170pxとするdiv#wrapper右の位置をアニメーション化 - そして、私はそれが右のタブに干渉しないようにスタイル属性を削除する.removeAttr('style');を追加しました。

右のタブでは、-170pxに戻って0に戻ってdiv#wrapperの位置をアニメーションします。次に、.removeAttr('style');を追加して、左のタブを妨げないようにスタイル属性を削除しました。

PROBLEM

.removeAttr('style');は、右のタブが開かれている場合は、私の左のタブがdisfunctionalことになり.animate完了後にインラインスタイル属性を、削除されていません。

ご覧くださいjsfiddlehttp://jsfiddle.net/motocomdigital/QyhpX/5/

はまた、誰もが任意の最初のタブのオープン交互にグリッチに気づくでしょうか？左か右？それは最初のオープニングでぶら下がっているように見えますが、突然開いてスナップしますが、スムーズに閉じてスムーズに再開します。そのちょうど最初のクリック口。

TAB CODE SCRIPT

var $tabLeft = $(".tab-left-button span"), 
    $tabRight = $(".tab-right-button span"), 
    $siteSlide = $("#wrapper"); 

    $tabLeft.on('click', function() { 
     if ($tabLeft.html() == 'X') { 

      $siteSlide.stop().animate({ right: "0" }, 300); 
      $tabLeft.html('Tab Left'); 

      return false; 

      $siteSlide.removeAttr('style'); 

     } else { 

      $siteSlide.stop().animate({ right: "-170px" }, 300); 
      $tabLeft.html('X'); 
      $('body,html').animate({ 
       scrollTop: 0 
      }, 800);        
     } 
    }); 

    $tabRight.on('click', function() { 
     if ($tabRight.html() == 'X') { 

      $siteSlide.stop().animate({ left: "0" }, 300); 
      $tabRight.html('Tab Right'); 

      return false; 

      $siteSlide.removeAttr('style'); 

     } else { 

      $siteSlide.stop().animate({ left: "-170px" }, 300); 
      $tabRight.html('X'); 
      $('body,html').animate({ 
       scrollTop: 0 
      }, 800);        
     } 
    }); 

すべてのヘルプは非常に高く評価されるだろう。おかげ

http://jsfiddle.net/motocomdigital/QyhpX/5/

Answer 1

@ JamesMcLaughlinが正しく言及したように、.removeAttrコールの前にreturnステートメントがあります。これが「到達不能コード」と呼ばれています。

しかし、これらのステートメントを切り替えるとしても、.animate()は非同期的に動作するため、まだ動作しません。ことを意味し、あなたがそうのように、アニメーション一度.removeAttr完全に完成を呼び出す必要があります：

$siteSlide.stop().animate({ right: "0" }, 300, function _afterAnimation() { 
    $siteSlide.removeAttr('style'); 
}); 

Answer 2

あなたが最初の関数から戻っているので、行が実行されることはありません。 （その後、素敵なJavaScriptの本を買いに行く）

 return false; 

     $siteSlide.removeAttr('style'); 

 $siteSlide.removeAttr('style'); 

     return false; 

へ：変更。

Answer 3

http://jsfiddle.net/Simplybj/QyhpX/12/はこれが何をしたいのですか？

Answer 4

私は同様の問題がありましたが、正確ではありません。animate()は、実行中のブロックremoveAttr()でした。単にチェーンにstop()を追加するとremoveAttr()が再び作業を取得します：

$example.animate({ 
     opacity: "0", 
    }, 700); 
$example.stop().removeAttr("style");