JQuery проблема зависания - PullRequest
Новая
       7

JQuery проблема зависания

0 голосов
/ 16 декабря 2010

на моем сайте я отображаю много коробок, до 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 Ответ

3 голосов
/ 16 декабря 2010

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

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