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

Question

我创建了一个 fiddle 来演示我的问题:http://jsfiddle.net/motocomdigital/QyhpX/5/

概述

我正在使用 jQuery .animate 功能创建一个选项卡式网站。在我的实时网站上，第一次交替时似乎出现了问题，但我似乎无法在 fiddle 中复制它。

左侧选项卡将 div#wrapper 右侧定位设置为 -170px，然后返回到 0 - 然后我将 .removeAttr('style'); 添加到删除样式属性，这样它就不会干扰右侧选项卡。

右侧选项卡将 div#wrapper 左侧定位设置为 -170px，然后返回到 0 - 然后我将 .removeAttr('style'); 添加到删除样式属性，使其不会干扰左侧选项卡。

问题

.removeAttr('style'); 在 .animate 完成后不会删除内联样式属性，这会导致我的左侧选项卡无法正常工作，如果右侧选项卡已开通。

请参阅jsfiddle http://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');
});