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/进行颜色动画。试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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转换执行此操作：

＆＃13;

.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}

＆＃13;

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

＆＃13;

Jquery在mouseenter上进行动画制作

3 个答案: