jQuery开关类没有在Chrome中正确激活

时间:2013-06-24 22:07:31

标签: jquery css google-chrome jquery-animate

我正在我的网站上创建一个使用jQuery的switch类功能来设置按钮动画的功能。

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

看到该页面

单击按钮后,按钮会从白色背景变为清晰背景,再次单击后会返回白色背景。这在firefox和Internet Explorer中完美运行,但在谷歌浏览器中,切换的类似乎无法正确呈现。

第二次单击时,按钮不会变为清晰,实际变为黑色。但是,在任何一点上,如果你检查元素,类会自行修复,所以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');
    }
});

以前有没有人见过这个?你知道为什么会这样吗?谢谢!

1 个答案:

答案 0 :(得分:0)

有同样的情况。

有趣的是,当你使用旧的.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");