在mouseenter事件上对背景色进行动画处理

Question

我想有这样，当鼠标进入.container元素的background-color的#facial元素慢慢由蓝色转变为白色。

我读到您必须使用jQuery的.animate()函数来实现此目的。

它似乎不起作用。 我在论坛上已经读过您需要称为JQuery UI的内容，但是这些帖子比较老。 我的JsFiddle中也没有看到此选项。 有人知道为什么这个脚本不起作用吗？

$(document).ready(function(){

$('.container').mouseenter(function(){
    $('#facial').animate({backgroundColor:'#ffffff'},'slow');
    });
});     

JsFiddle链接

Answer 1

尝试利用css :hover现有的transition属性设置为8.5s

 #test_box { height: 50px; width: 50px; background: red; transition: background 2s ease; } #test_box:hover { background: green; } body { background-color: #d6d6d6; } .container { margin: 200px auto; background-color: red; width: 478px; height: 200px; } #facial { float: right; width: 239px; height: 200px; background: #008aaf; transition: background 8.5s ease; } #facial h1, #facial h2 { text-align: center; margin-top: 30px; color: #FFFFFF; } .container:hover > #facial { background: #fff; } 

 <div class="container"> <img src="http://s23.postimg.org/enn2yyh7v/Facial.jpg" /> <div id="facial"> <h1>Facial</h1> <h2>Marketing Material</h2> </div> <div id="test_box">...</div> </div> 

jsfiddle http://jsfiddle.net/b008nczk/32/

Answer 2

彩色动画需要jQuery UI来扩展animate方法。

https://jqueryui.com/animate/

实际上，要使用jquery设置背景颜色的动画，您需要使用Color插件。

https://github.com/jquery/jquery-color

小提琴： https : //jsfiddle.net/b008nczk/34/

$(document).ready(function () {
    //1.1 On hover the background of #facial will turn white
    $('.container').mouseenter(function () {
        $('#facial').animate({
            'background-color': '#ffffff'
        }, 1000);


    });
});

另外，当您在jsfiddle中包含jQuery时，它也会自动包含jqueryui。

Answer 3

使用CSS可以正常工作。 该项目开始时是一个实际的Jquery项目，但最终使用纯CSS完成了。 多谢你们！ 这是结果。

.container:hover > #facial {
  background: #fff;
}

结果！