0

私のサイトでは、最大 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 つの問題は、すべてのボックスが古い背景色になるわけではないことです。

何か案は？

4

1 に答える 1

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);
  });
});
于 2010-12-16T10:43:29.493 に答える