Jquery在mouseenter上进行动画制作

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

看起来你不能在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>