jquery - Chrome 20.x 问题(bug？)通过 jQuery 定期应用/删除类

Question

对于那些喜欢用头撞电脑键盘的人来说，这是一个有趣的游戏。

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

导航下方发生了有趣的 jQuery 小事情。它实际上是一个径向菜单( plugin )。该插件包含触发顺时针和逆时针旋转的功能，默认情况下不显示径向菜单。所以我有初始化径向菜单的代码、立即显示它的代码以及每隔一段时间触发下一次旋转的代码。最后，我使用插件的 API 来连接 afterAnimation 选项，以确保“事件”类应用于“事件”菜单项 - 我将使用它来做一些有趣的 CSS 内容，旋转一些以您可以看到列表项上的“active”类现在只添加了红色背景。

这在 IE8+、Firefox、Safari 和 Chrome 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

为什么需要一个插件？您只需对三个简单元素的顶部和左侧进行动画处理即可。为什么不手动写呢。它肯定不会比您提供的示例代码更长。

function setPosition(element, position) {
   var placements = [[100,100], [200, 200], [0, 200]] ; //for instance

   $(element).stop().animate({left: placements[position][0]+ 'px', top: placements[position][1] + 'px'});

   if (position == 0) { $(element).addClass('activeMenuItem');}
}

var state = 0;

function rotateMenu(direction) {
    state += direction;
    if (state < 0) state = 2;
    if (state > 2) state = 0;

    $('.menuItem').removeClass('activeMenuItem');

    setPosition('#item0', state  % 3);
    setPosition('#item1', (state + 1) % 3);
    setPosition('#item2', (state + 2) % 3);
}

就是这样。 rotateMenu(1) 向一个方向旋转，而 rotateMenu(-1) 向另一个方向旋转。

您的菜单项将具有 class="menuItem"和 id="item"。

这里是jsFiddle进行一些演示。