jQuery开关类在Chrome中未正确激活

Question

我正在我的网站上制作一个功能，它使用jQuery的switch类函数来动画按钮。

您可以在http://www.minecraftserverland.com/testview.php

按钮在单击时从白色背景变为透明背景，在第二次单击后又变为白色背景。这在firefox和internetexplorer中非常有效，但在googlechrome中，切换后的类似乎无法正确渲染。

当第二次单击时，按钮不会变亮，实际上会变黑。然而，在任何时候，如果检查元素，类都会自行修复，因此javascript显然工作正常。

我使用的jquery示例：

$("#ftb").click(function () {
    if ( $("#ftb").hasClass("s1") ) {
        $('#ftb.s1').switchClass( "s1", "sd1", 700, "swing" );
        $('input#main').val('1');
    } else if (  $("#ftb").hasClass("sd1") ) {
        $('#ftb').switchClass( "sd1", "s1", 700, "swing" );
        $('#bukkit').switchClass( "s1", "sd2", 700, "swing" );
        $('#vanilla').switchClass( "s1", "sd3", 700, "swing" );
        $('input#main').val('ftb');
    }
});

以前有人遇到过这种情况吗？你知道为什么会发生这种事吗？谢谢

Answer 1

也有同样的情况。

有趣的是，当你使用旧的.removeclass().addclass()时，chrome会正常工作。每次打字都很令人振奋，所以我做了一个简单的功能，没有任何回调或持续时间，希望它能帮助你们。

jQuery.fn.switcher = function(n,s) {
    var $elem = $(this[0]) ;
    $(this).removeClass(n).addClass(s);
    return $elem; //ensures jquery chainability
};

工作原理如下：

$(element).switcher("removedclass","addedclass");