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

【问题标题】：jquery highlight fading - timeout problemjquery高亮褪色-超时问题
【发布时间】：2009-06-22 11:27:33
【问题描述】：

我在一个页面上有两组 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() 函数并未统一应用于属于该类的所有元素...它仅适用于少数元素..
我犯了什么错？

【问题讨论】：

我已经用大约 40 个盒子（boxOne 和 boxTwo 类型）对其进行了测试，它在 FF、Chrome、Opera 10 和 IE8 中运行良好
感谢您的支持。我正在测试FF。在大约两次的 10 次点击中，某些框不会淡出。但是如果我调整窗口大小，它们会淡出。发生了什么……？
结果不一致的原因是什么？即使盒子的数量相同，它的工作方式是否有所不同？或者当盒子的数量发生变化时？或者当您在不同的浏览器中运行它时？
这件事与浏览器无关，当我说结果不一致时，我的意思是很少有框不会恢复到以前的背景颜色。

标签： jquery settimeout jquery-animate

【解决方案1】：

现在我正在使用这个插件，它工作正常。

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

【讨论】：

非常感谢，我对现有的库很感兴趣，我尝试了 scriptaculous、jquery 颜色库和效果库。他们都有一些问题。你发布的那个就像一个魅力。

【解决方案2】：

也许首先检查 Javascript 代码的语法。语法不一致导致不同浏览器的结果不一致。

【讨论】：

【解决方案3】：

在某些地方，您似乎在 .boxOne 和 .boxTwo 周围缺少了一些引号。不确定这是格式错误还是故意的。可能会导致某些浏览器出现问题。

【讨论】：