jQuery - 为什么属性不被删除？ .removeAttr

Question

我创建了一个小提琴来证明我的问题：http://jsfiddle.net/motocomdigital/QyhpX/5/

概述

我创建一个标签式的网站，使用jQuery .animate功能。我的现场网站似乎在第一次轮换时出现了一些问题，但我似乎无法在小提琴中复制它。

左边的制表符将div#wrapper右边的位置设置为-170px并回到0 - 然后我添加了.removeAttr('style');以删除样式属性，所以它不会干扰正确的制表符。

右选项卡动画div#wrapper左定位到-170px并返回0 - 然后我添加了.removeAttr('style');删除样式属性，因此它不会干扰左标签。

问题

的.removeAttr('style');不去除后.animate完成内联样式属性，这会导致如果有合适的标签已经打开了我的左选项卡是失去作用。

请参阅jsfiddlehttp://jsfiddle.net/motocomdigital/QyhpX/5/

也没有人注意到在第一个选项卡打开交替任何毛刺？左还是右？它似乎挂在第一次开放，然后突然打开，但顺利关闭，然后顺利重新打开。它只是第一次点击开放。

TAB代码脚本

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

你从函数返回第一个，所以该线路将永远不会被执行。更改：

 return false; 

     $siteSlide.removeAttr('style'); 

到

 $siteSlide.removeAttr('style'); 

     return false; 

（再去买一个很好的JavaScript的书）。

Answer 3

http://jsfiddle.net/Simplybj/QyhpX/12/这是你想要的吗？

Answer 4

我有一个类似的问题，但不是确切的，animate()阻止removeAttr()执行。简单地增加一个stop()到链将得到removeAttr()再次合作：

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