使用CSS和jQuery动画鼠标离开？

Question

我正在使用CSS过渡来为鼠标悬停时的背景颜色设置动画.

我有以下代码:

div {
  width: 100px;
  height: 100px;
  background: red;
}

div:hover {
  background: green;
  transition: all 0.5s ease-in-out;
}

<div></div>

此代码仅为鼠标上的背景颜色设置动画.它不会使鼠标恢复活力.我有两个问题:

1. 如何使用CSS为鼠标设置动画？

2. 我如何仅使用jQuery执行此操作？

jsfiddle:http://jsfiddle.net/fz39N/

Answer 1

1)你改变你的CSS

div {
    width: 100px;
    height: 100px;  
    background: red;
    transition: background 0.5s ease-in-out;
}

div:hover {
    background: green;

}

小提琴

设置过渡到元素,而不是伪类.

2)

使用jQuery,你需要两个元素来交叉淡入淡出,或者一个彩色动画插件.jQuery UI内置了彩色动画,然后你可以这样做:

$('div').on({
    mouseenter: function() {
        $(this).animate({backgroundColor: 'green'},1000)
    },
    mouseleave: function() {
        $(this).animate({backgroundColor: 'red'},1000)
    }
});

小提琴

如果你还没有使用jQuery UI,我建议使用一个更小的插件,比如这个!