jquery - div背景色css类淡入淡出效果？

Question

我正在尝试在鼠标悬停时向 div 添加淡入淡出效果。淡入淡出效果是颜色之间的过渡background-color。虽然我可以立即更改 css 类，但在创建淡入淡出动画时使用fadeIn()或animate()没有用处。我该如何制作这个动画？

jQuery：

$('div.my-bkgr').mouseover(function() {
  $('div.my-bkgr').attr("class", "my-bkgr-mouseover");
}).mouseout(function() {
  $('div.my-bkgr').attr("class", "my-bkgr");
});

CSS：

.my-bkgr {
  background-color: #ECF0F1;
}

.my-bkgr-mouseover {
  background-color: #E74C3C;
}

Answer 1

仅使用该属性并根据您的需要transition指定 a怎么样？transition-duration例如

.my-bkgr  {
background-color: #ECF0F1;
transition: all 3s ease-out; /* Include vendor prefixes before this */
}

.my-bkgr:hover {
background-color: #E74C3C;
}

jsFiddle

Answer 2

您可以使用纯 CSS 完成所有这些操作：

.my-bkgr {
  background: #ECF0F1;
  /* A transition of 0.3 seconds */
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  -o-transition: background 0.3s;
  -ms-transition: background 0.3s;
  transition: background 0.3s;
 }
.my-bkgr:hover {
  background: #E74C3C;
}

如果你想要 IE 支持，或者使用 jQuery UI：http: //jqueryui.com/animate/

Answer 3

尝试使用 CSS 过渡。

.my-bkgr{
    -webkit-transition: color 2s ease;
       -moz-transition: color 2s ease;
        -ms-transition: color 2s ease;
         -o-transition: color 2s ease;
            transition: color 2s ease;
}

---

来源

http://www.w3.org/TR/css3-transitions/

http://css3generator.com/

Answer 4

jQuery 文档在这里有一个如何做你想做的事的例子：http: //docs.jquery.com/UI/Effects/Highlight

$("div").click(function () {
  $(this).effect("highlight", {}, 3000);
});

只需将 click 替换为所需的事件即可。所以也许试试这个（我的头顶）

$('div.my-bkgr').bind('mouseover', function(){
    $(this).effect("highlight", {
      colour: #E74C3C
    }, 3000);
});