jquery - jquery高亮褪色-超时问题

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 代码的语法。不一致的语法会导致不同浏览器上的结果不一致。