анимация при наведении курсора - PullRequest
Новая
       9

анимация при наведении курсора

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

Я хочу применить эффект наведения к разделительным блокам, может быть до 60 полей на странице.Он должен быть в точности равен эффекту наведения CSS, но я хочу применить эффект затухания к цвету наведения.Например, у меня светло-зеленый цвет фона и темно-зеленый цвет фона при наведении, затем он должен исчезнуть с одной стороны на другую.

Я немного поиграл с jQuery, но мог получить желаемый результат:

    $(".box").hover(function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
    },function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 500);
    });

Ответы [ 6 ]

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

Вам необходимо использовать приличный плагин цвета . См. jQuery animate backgroundColor для получения дополнительной информации.

Кроме того, ваш исходный код на самом деле ничего не сделает, так как вы хотите, чтобы он впоследствии анимировался в другой цвет. 

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

РЕДАКТИРОВАТЬ: см., Например, http://jsfiddle.net/eHXNq/2/.

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

просмотрите этот код, я думаю, что это может вам помочь !!! 

 <!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>

    <li class='fade'>Socks</li>
  </ul>
<script>
$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  }, 
  function () {
    $(this).find("span:last").remove();
  }
);



//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

</script>

</body>
</html>

посмотрите и на эту ссылку, http://api.jquery.com/hover/

0 голосов
/ 16 декабря 2010 
$(".box").hover(
  function () {
 // this is mouseover
  }, 
  function () {
//  this is mouse out
  }
);

см. Пример здесь

http://jsfiddle.net/krRse/

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

60 коробок? Пожалуйста, используйте делегирование события или в прямом эфире.

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

Я полагаю, вы не используете функцию hover, как следует.вторая функция используется, когда пользователь покидает поле, поэтому вы должны вернуться к исходному цвету.

Белый, например: 

  $(".box").hover(function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
    },function() {
        $(this).animate({ backgroundColor: "#FFFFFF" }, 500);
    });
0 голосов
/ 16 декабря 2010

У меня нет большого опыта работы с jQuery, но это похоже на ошибку копирования и вставки, поскольку у вас одинаковый цвет в обоих .animate() s

...