Javascript jQuery悬停问题

在我的网站上，我展示了很多盒子，最多60个。每个框都可以悬停，并有自己的颜色。我意识到使用以下js：

$(".box").each( function () {
         $(this).data('baseColor',$(this).css('color'));
         $(this).hover(function() {
           $(this).animate({ backgroundColor: "#68BFEF" }, 500);
         },function() {
           $(this).animate({ backgroundColor: $(this).css('background-color') }, 
            1000);
         });
    });

当鼠标悬停在方框上时，它的背景色应为#68BFEF，当鼠标离开方框时，颜色应更改为其旧值

这是我应用css的方式：

<div id="primary">
    <div class="box" style="background:...."></div>
    <div class="box" style="background:...."></div>
    <div class="box" style="background:...."></div>
    ....
</div>

....

我的问题是悬停效果应该更快，颜色应该变化更快。另一个问题是不是所有的框都有旧的背景色

---

有什么想法吗？

离开悬停状态时，您需要提取存储在数据中的基色，例如：

$(".box").each( function () {
  $(this).data('baseColor',$(this).css('color'));
  $(this).hover(function() {
    $(this).animate({ backgroundColor: "#68BFEF" }, 500);
  },function() {
    $(this).animate({ backgroundColor: $(this).data('baseColor') }, 1000);
  });
});

或者，使用以下更优化的版本：

---

离开鼠标悬停时，需要拖动存储在数据中的基色，例如：

$(".box").each( function () {
  $(this).data('baseColor',$(this).css('color'));
  $(this).hover(function() {
    $(this).animate({ backgroundColor: "#68BFEF" }, 500);
  },function() {
    $(this).animate({ backgroundColor: $(this).data('baseColor') }, 1000);
  });
});

或者，使用以下更优化的版本：