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属性并根据需要指定transition-duration呢？ e.g

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

<强>来源（S）

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

Div背景色css类淡化效果？

4 个答案: