jQuery悬停以使用淡入效果替换HTM悬停属性

Question

我正在寻找一个jQuery技术或插件，使用它我们的默认悬停属性应该成为淡入的jQuery悬停属性。假设我们将鼠标光标放在任何div上，其背景应该是淡入淡出的。 请看这张图片。

  

Answer 1

您还可以使用CSS3过渡。即使在IE中不支持CSS3过渡，你仍然可以在没有淡入淡出的情况下在IE中获得悬停效果。

基本思想是使用JavaScript在悬停时添加和删除类。然后使用CSS3过渡来为背景颜色过渡设置动画。

<强> HTML：

<div class="entry">
     Lorem Ipsum
</div> 
<div class="entry">
     Dolor Etam
</div> 
<div class="entry">
     Lorem Elar
</div>

<强> JavaScript的：

$('.entry').mouseenter(function (event) {
    $(this).addClass('active');                
});
$('.entry').mouseleave(function () {
    $(this).removeClass('active');
});

<强> CSS：

.entry {
    background: #fff;
    border-bottom: 1px dotted #ccc;    
    -webkit-transition:background-color 2s,-webkit-transform 2s;
    transition:background-color 2s, transform 2s;    
}

.entry.active {
    background: #ddd;
}

JSFiddle演示：http://jsfiddle.net/d57BW/

参考CSS3转换用法：http://caniuse.com/css-transitions

Answer 2

JQuery不会为颜色设置动画。 如果您想替换背景颜色，请使用jquery-color plugin

（仅更改不带插件的不透明度的代码位于底部）

现在替换颜色的代码：

HTML：

<div id ="myDiv">TEST</div>

CSS：

#myDiv{background-color:red; width:300px; height:200px; text-align:center;}

JS：

$("#myDiv")
  .mouseover(function() {
    $(this).animate({backgroundColor: "yellow"}, 'slow');
  })
  .mouseout(function() {
    $(this).animate({backgroundColor:"red"},'slow');
  });

此处示例：http://jsfiddle.net/2khZe/

如果您只想机会不透明度已经设置的背景颜色，您就不需要插件，只需将上面的js代码替换为：

$("#myDiv")
  .mouseover(function() {
    $(this).animate({opacity: 0.5}, 'slow');
  })
  .mouseout(function() {
    $(this).animate({opacity: 1},'slow');
  });

此处示例：http://jsfiddle.net/w2Z7x/

希望它对你有所帮助。

西奥。

Answer 3

without javascript
//this code your test 
.entry{
    border:1px solid #ddd;
    height:120px;
    line-height:120px;
    font-size:20px;
    padding-left:10px;
    margin-bottom:0.5px;
    transition:background-color 0.7s linear 0.1s;
    -moz-transition:background-color 0.7s linear 0.1s;
    cursor:pointer;
}
.entry:hover{
    background-color:#eee;
    transition:background-color 0.7s linear 0.1s;
    -moz-transition:background-color 1s linear 0.1s;
}