Chrome 20.x问题(错误？),通过jQuery定期应用/删除类

Question

对于那些喜欢把头撞在电脑键盘上的人来说,这是一个有趣的.

网站:http://blduke.com.php53-27.dfw1-2.websitetestlink.com

这个导航正下方有趣的小jQuery事情.它实际上是一个放射状菜单(插件).插件包括将顺时针和逆时针触发旋转的功能,默认情况下不显示径向菜单.所以我有了初始化径向菜单的代码,立即显示它的代码,以及每隔一段时间触发下一次旋转的代码.最后我使用插件的API挂钩到afterAnimation选项,以确保"活动"类应用于"活动"菜单项 - 我将使用它来做一些有趣的CSS东西,旋转一些到此图形的权利等.您可以看到列表项目上的"活动"类现在只是添加了红色背景.

这在Chrome的IE8 +,Firefox,Safari和17.0-19.0版本中非常完美.在Chrome 20.x中,它以一种奇怪的方式打破.

活动类还是换到时候就应该相应的列表项,但浏览器是做一些奇怪的,就像两个项目延迟活动类的渲染上新项目,或完全在某些点上跳过它,或者显示它(它最后一个项目,下一个项目)

没有脚本错误,我很困惑,插件开发也是如此.任何人有任何想法,见解？

我的代码:

jQuery(document).ready(function($) {
    $("#radial_container").radmenu({
        listClass: 'list', // the list class to look within for items
        itemClass: 'item', // the items - NOTE: the HTML inside the item is copied     into the menu item
        radius: 130, // radius in pixels
        animSpeed:400, // animation speed in millis
        centerX: 0, // the center x axis offset
        centerY: 0, // the center y axis offset
        angleOffset: 30, // in degrees,
        afterAnimation: function($m){ // after the animation triggers, grab the     "active" menu item (object) to recieve the "active" class
            $("#radial_container").radmenu(2); 
        }
   }).radmenu("show"); // Show the menu straight off, we don't need to trigger with a click

    setInterval(function() { // automatically rotate the menu at intervals
        $('#radial_container').radmenu('next');
    }, 4000);

});

Answer 1

我在本地测试时稍微编辑了您的代码：

setInterval(function() { // automatically rotate the menu at intervals
    $('.radial_div div').removeClass('active'); //add this line
    $('#radial_container').radmenu('next');
}, 4000);

在 Chrome 20 和 FF16a 上测试。

这将确保active在调用旋转插件时所有 div 都会丢失该类，并且在该afterAnimation函数运行时将其正确添加回顶部项目。

然后新问题似乎很难调试，因为我无法让它不断发生。不过，试试这个：

afterAnimation: function($m){ // after the animation triggers, grab the "active" menu item (object) to recieve the "active" class
    setTimeout(function() {
        $("#radial_container").radmenu(2);
    }, 0); 
}

这将确保该radmenu函数仅在当前函数堆栈完成处理后才被调用，我看了几分钟，它甚至一次都没有出现错误。

另外，如果您想从类开始顶部项目active，您可以添加：

$('.radial_div div:nth-child(3)').addClass('active');

函数内的任何位置.ready。