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>

Моя проблема в том, что эффект наведения должен быть быстрее, цвет должен меняться быстрее. Другая проблема заключается в том, что не все ящики имеют старый цвет фона.

Есть идеи?


javascript jquery jquery-hover
person Upvote    schedule 16.12.2010    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вам нужно вытащить базовый цвет, который вы сохраняете в данных, при выходе из наведения, например:

$(".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);
  });
});
person Nick Craver    schedule 16.12.2010