jQuery悬停问题

时间:2010-12-16 10:41:25

标签: javascript jquery jquery-hover

在我的网站上我显示了很多盒子,最多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>

我的问题是悬停效果应该更快,颜色应该更快地改变。另一个问题是并非所有的盒子都有旧的背景颜色。

有什么想法吗?

1 个答案:

答案 0 :(得分:3)

离开悬停时,您需要拉出存储在数据中的基色,例如:

$(".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);
  });
});

或者,使用$.data()代替更优化的版本:

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