Javascript 使用jquery在div上缓慢更改颜色的动画效果

如何使div框在鼠标上方缓慢地更改颜色

js代码

$('#link').animate({ backgroundColor: "#f6f6f6" }, 'slow', function(){
 $('#link').animate({ backgroundColor: "#f6f6f6" }, 'slow');
 })

css代码

#link
{
width:500px;
height:52px;
border:dashed #666 2px;
margin-top:293px;
}

html代码

<div id="link"></div>

---

您可以使用如下javascript函数

  var div = document.getElementById( 'div_id' );
  div.onmouseover = function() {
    this.style.backgroundColor = 'green';
    var h2s = this.getElementsByTagName( 'h2' );
    h2s[0].style.backgroundColor = 'blue';
  };
  div.onmouseout = function() {
    this.style.backgroundColor = 'transparent';
    var h2s = this.getElementsByTagName( 'h2' );
    h2s[0].style.backgroundColor = 'transparent';
  };

使用CSS

动画

CSS

#link
{
    width:500px;
    height:52px;
    border:dashed #666 2px;
    margin-top:293px;
}

#link:hover {
        animation: color 1s ease-in-out 0 1 normal both;
}

@keyframes color {
    0% { background: white; }
    100% { background: #F6F6F6; }
}

#link
{
    background: transparent;
    width:500px;
    height:52px;
    border:dashed #666 2px;
    margin-top:293px;
    transition: background .5s ease-in-out;
}
#link:hover {
    background: red;
}

使用CSS

transition

CSS

#link
{
    width:500px;
    height:52px;
    border:dashed #666 2px;
    margin-top:293px;
}

#link:hover {
        animation: color 1s ease-in-out 0 1 normal both;
}

@keyframes color {
    0% { background: white; }
    100% { background: #F6F6F6; }
}

#link
{
    background: transparent;
    width:500px;
    height:52px;
    border:dashed #666 2px;
    margin-top:293px;
    transition: background .5s ease-in-out;
}
#link:hover {
    background: red;
}

---

好了。您可以使用jquery

mouseover

和

mouseleave

事件

$("#link").on("mouseover",function(){
   $(this).animate({backgroundColor:"red"},'slow');
}).on("mouseleave",function(){
   $(this).animate({backgroundColor:"white"},'slow');
});

您还需要进行此操作。

animate

是JQuery UI库的一部分

---

下面是

CSS

animation

，也许？PS:jQuery的动画制作方法不会对颜色进行动画制作。你必须使用插件。这样地：