Question

我已经创建了一个小提示来演示我的问题：http://jsfiddle.net/motocomdigital/QyhpX/5/

概览

我正在使用jQuery .animate功能创建一个标签式网站。在我的直播网站上哪一个在第一次轮换时看起来很麻烦，但我似乎无法在小提琴中复制它。

左侧标签将div#wrapper右侧定位设置为-170px并返回0 - 然后我添加了.removeAttr('style');以删除样式属性，因此它不会干扰右侧标签。< / p>

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

问题

在.removeAttr('style');完成后，.animate未删除内联样式属性，如果右侧标签已打开，则会导致我的左侧标签失效。

请参阅jsfiddle http://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正确提到的那样，在return来电之前，您有.removeAttr声明。这就是我们所说的“无法访问的代码”。

但是，即使你要切换这些语句，它仍然无效，因为.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");

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

4 个答案: