Question

我正试图让它在鼠标进入.container元素时，background-color元素的#facial从蓝色缓慢过渡到白色。

我已经读过你必须使用jQuery的.animate()函数才能实现这一目标。

它似乎不起作用。我在论坛上看到你需要一些叫做JQuery UI的东西，但那些帖子比较旧。我也没有在我的JsFiddle中看到这个选项。有谁知道为什么这个脚本不起作用？

$(document).ready(function(){

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

JsFiddle Link

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

Results!

在mouseenter事件上为背景颜色设置动画

3 个答案: