Chrome 20.x问题（bug？），通过jQuery定期应用/删除类
对于那些喜欢将你的头撞在电脑键盘上的人来说，这是一个有趣的选择。
网站：http：//blduke.com.php53-27.dfw1-2.websitetestlink.com
有趣的小jQuery事情正在导航下面。 它实际上是一个径向菜单（插件）。 该插件包含将触发顺时针和逆时针旋转的功能，并且默认情况下不显示放射状菜单。 所以我得到了代码来初始化放射状菜单，代码立即显示，代码以间隔触发下一次旋转。 最后，我使用插件的API来挂接afterAnimation选项，以确保将“活动”类应用于“活动”菜单项 - 我将用它来做一些有趣的CSS事物，将一些旋转到该图形的右侧等等。您可以看到，现在列表项上的“活动”类正好添加了红色背景。
这在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);
});
我在本地测试时稍微编辑了代码：
setInterval(function() { // automatically rotate the menu at intervals
$('.radial_div div').removeClass('active'); //add this line
$('#radial_container').radmenu('next');
}, 4000);
测试Chrome 20和FF16a。
这将确保所有div在调用旋转插件时都会丢失active类，并且在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函数中的任何位置。
为什么你需要一个插件？ 你只是动画三个简单元素的顶部和左侧。 为什么不手动编写它。 它不会长于您提供的示例代码。
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的一个小演示。
链接地址: http://www.djcxy.com/p/10987.html上一篇: Chrome 20.x issue (bug?) with classes applied/removed at intervals via jQuery