javascript - 使用jquery对div进行缓慢的颜色变化动画效果

Question

如何让 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>

Answer 1

使用CSS 动画

DEMO

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

使用 CSS transition

DEMO

CSS

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