Проблема Chrome 20.x (ошибка?) С классами, примененными / удаленными через интервалы через jQuery

Question

Вот забавный для тех из вас, кто любит стучать головой по клавиатуре компьютера.

Сайт: http://blduke.com.php53-27.dfw1-2.websitetestlink.com/

Забавная маленькая штука jQuery происходит прямо под навигацией здесь. На самом деле это радиальное меню ( плагин). Плагин включает в себя функции, которые будут запускать вращение по часовой стрелке и против часовой стрелки, и по умолчанию радиальное меню не отображается. Итак, у меня есть код для инициализации радиального меню, код для его немедленного отображения и код для запуска следующего поворота через определенные промежутки времени. Наконец, я использовал API плагина, чтобы подключиться к опции afterAnimation, чтобы убедиться, что "активный" класс применен к "активному" пункту меню - я собираюсь использовать его, чтобы сделать некоторые забавные вещи CSS, повернуть некоторые, чтобы справа от этого рисунка и т. д. Вы можете видеть, что "активный" класс в элементах списка прямо сейчас просто добавляет красный фон.

Это прекрасно работает в IE8+, Firefox, Safari и версиях Chrome 17.0-19.0. В Chrome 20.x он ломается странным образом.

Активный класс по-прежнему переключается на соответствующий элемент списка, когда это необходимо, но браузер делает что-то странное, например, задерживает рендеринг активного класса на новом элементе, либо полностью пропускает его в некоторых точках, либо показывает его на двух элементах (предмет, на котором он был последним, и следующий)

Нет ошибок скрипта, и я озадачен, как и плагин dev. У кого-нибудь есть идеи, понимание?

Мой код:

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 класс, когда вы вызываете плагин вращения, и он правильно добавляется обратно в верхний элемент, когда 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 функция.

Answer 2

Зачем вам плагин для этого? Вы просто анимируете сверху и слева три простых элемента. Почему бы не написать это вручную. Это не будет больше, чем образец кода, который вы предоставили наверняка.

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 для небольшой демонстрации.