•  10-10-2019
  •  | 
  •  

Вопрос

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

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

    $(".box").hover(function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
    },function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 500);
    });
Это было полезно?

Решение

Вам нужно использовать Приличный цвет плагина. Анкет Видеть jquery animate founalcolor Чтобы получить больше информации.

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

$(".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/ Например.

Другие советы

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

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

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

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

$(".box").hover(
  function () {
 // this is mouseover
  }, 
  function () {
//  this is mouse out
  }
);

Смотрите пример здесь

http://jsfiddle.net/krrse/

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

 <!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/

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top