JQuery Highlight Fading - проблема тайм-аута

Question

У меня есть два набора boxex на странице. 10 коробок, принадлежащих к классу 'boxOne' и еще 10 принадлежащих к классу 'boxTwo'
Есть кнопка. При нажатии кнопки я использую эффект jquery, чтобы выделить, а затем исчезнуть цвет фона всех элементов, принадлежащих к классам «Boxone» и «Boxtwo».

Ниже приведен код.

var colorOfBox1 = "'" + $(.boxOne).css('backgroundColor') + "'";  
$(.boxOne).animate(
    { 'backgroundColor': "#FF9900" }, 
    { 'queue': false, 'duration': 1000 });

setTimeout( function(){  
        $(.boxOne).animate(
          { 'backgroundColor': colorOfBox1}, 
        {'queue': false, 'duration': 2000} 
      );
}, 2000);

var colorOfBox2 = "'" + $(".boxTwo).css("backgroundColor") + "'";  
$('.boxTwo').animate({ 'backgroundColor': "#FF9900" }, {'queue': false, 'duration': 1000});  
  setTimeout(
    function(){
        $('.boxTwo).animate(  
            { 'backgroundColor': colorOfBox2 }, 
                {'queue': false, 'duration': 2000} 
          );
}, 2000);

Все поля подсвечиваются указанным цветом при нажатии кнопки. Теперь проблема в том, что иногда немногие из этих полей не исчезают. Их фон остается выделенным. Это происходит иногда без согласованности. Я хочу последовательного поведения.

Я вижу, что функция setTimeOut () не применяется одинаково ко всем элементам этого класса ... Она применяется только к нескольким элементам ..
Какую ошибку я делаю?

Answer 1

Теперь я использую этот плагин, и он просто отлично работает.

http://jquery.offput.ca/highlightFade/old.php

Answer 2

В некоторых местах у вас отсутствуют несколько кавычек вокруг .boxOne и .boxTwo Не уверен, была ли это ошибка форматирования или преднамеренная. Может быть причиной проблем с некоторыми браузерами.

Answer 3

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