Jquery 鼠标输入动画

Question

我不确定这个脚本有什么问题，但它似乎不想工作。意思是盒子应该根据 mouseenter/leave.

淡入淡出颜色

$(document).ready(function() {
    $('.square-box').mouseenter(function() {
        $(this).animate({
            background-color: '#AAAAAA'
        }, 1000);
    });
    $('.square-box').mouseleave(function() {
        $(this).animate({
            background-color: '#CCCCCC'
        }, 1000);
    });
});

https://jsfiddle.net/k9met5oz/

我做错了什么？谢谢

Answer 1

您只能为具有数值的属性设置动画。但是你可以使用这个插件 https://github.com/jquery/jquery-color/ 来制作彩色动画。试试这个：

$(document).ready(function() {
    $('.square-box').mouseenter(function() {
        $(this).animate({
            "backgroundColor": '#AAAAAA'
        }, 1000);
    });
    $('.square-box').mouseleave(function() {
        $(this).animate({
            "backgroundColor": '#CCCCCC'
        }, 1000);
    });
});

.square-box {
  width: 200px;
  height: 200px;
  line-height: 200px;
  cursor: pointer;
  background-color: #CCC;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.js"></script>

<div class="square-box">TEST BOX</div>

Answer 2

看来你不能animate colors by default in jquery

您可以通过更改 css 属性来实现。

$(document).ready(function() {
  $('.square-box').mouseenter(function() {
    $(this).css({
      "background-color": "#aaa"
    });
  }).mouseleave(function() {
    $(this).css({
      'background-color': '#CCCCCC'
    })
  });
});

.square-box {
  width: 200px;
  height: 200px;
  line-height: 200px;
  cursor: pointer;
  background-color: #CCC;
  text-align: center;
  transition: 1s all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class='square-box'>
  TEST BOX
</div>

Answer 3

Jquery 默认情况下无法设置动画颜色。但是你不需要插件。您可以更轻松地使用 CSS 转换来做到这一点：

.square-box {
  width: 200px;
  height: 200px;
  line-height: 200px;
  cursor: pointer;
  background-color: #CCC;
  text-align: center;
  -webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}

.square-box:hover {background:#AAAAAA}

<div class='square-box'>
  TEST BOX
</div>

Jquery 鼠标输入动画

Jquery animate on mouseenter

javascript

css

jquery

jquery-animate