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完成,这将导致如果有合适的标签已经打开了我的左选项卡是失去作用.

请参阅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');
});