如何使悬停背景平滑淡入淡出？

Question

我的网站上有一个列表，<li> 背景是 30% 不透明度的 1 像素黑色图像，重复填充整个<li>。它有一个悬停，这是一个 2% 不透明度的 1 像素白色图像。

我希望悬停背景平滑地淡入（淡出），而不是立即出现悬停背景。

HTML

<ul>
    </i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 1</li>
    </i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 2</li>
    </i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 3</li>
</ul>

CSS

li{
    width: 572px;
    height: 20px;
    padding: 4px 14px 0px 14px;
    background: url('../images/black_op30.png');
    border-bottom: 1px solid #2f2f2f;
}

li:hover{
    background: url('../images/white_op2.png') repeat;
}

我认为我想要的可以用 jQuery 来实现，但我不知道如何。

编辑：简单地说，我想要的只是使<li>s 过渡的悬停顺利。

Answer 1

您可以使用这样的 css3 转换最轻松地做到这一点：

li{
    width: 572px;
    height: 20px;
    padding: 4px 14px 0px 14px;
    background: url('../images/black_op30.png');
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid #2f2f2f;
    -moz-transition: background 1s;
    -webkit-transition: background 1s;
    -o-transition: background 1s;
    -ms-transition: background 1s;
    transition: background 1s;
}

li:hover{
    background: url('../images/white_op2.png') repeat;
    background: rgba(255,255,255,0.02);
}

请注意，在透明颜色到 rgba 版本之间发生了转换。您可以使用 jQuery 实现相同的功能，但它要复杂得多，并且动画效果不会那么流畅。在 IE 中也无法在透明颜色和 rbga 之间进行淡化，并且使用这种技术，IE 可以正常工作并且不会淡化（它会退回到不支持 rgba 的 .png 文件）。

IE 支持的方法，（支撑自己）：

 <li id="wrap">
     <div id="content">
          Content
     </div>
     <div id="fade-1"></div>
     <div id="fade-2"></div>
 </li>

CSS

#content, #fade-1, #fade-2{
    width: 572px;
    height: 20px;
    padding: 4px 14px 0px 14px;       
    position: absolute;
}

#content{
    z-index: 3;
}

#wrap{
   position:relative;  
   width: 600px;
   height: 24px;
}

#fade-1{
   background: url('../images/black_op30.png');
   background:transparent url(../images/black_op30.png);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»(src='../images/black_op30.png',sizingMethod='scale');
   background: rgba(0,0,0,0.3);     
   border-bottom: 1px solid #2f2f2f;   
   z-index: 1;    
}
#fade-2{
   display:none;
   background: url('../images/white_op2.png') repeat;
   background:transparent url(../images/white_op2.png);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»(src='../images/white_op2.png',sizingMethod='scale');
   background: rgba(255,255,255,0.02);
   border-bottom: 1px solid #2f2f2f;
   z-index: 2;
}

JS：

$('#wrap').hover(function(){
     $('#fade-1').stop().fadeOut();
     $('#fade-2').stop().fadeIn();
}, function(){
     $('#fade-1').stop().fadeIn();
     $('#fade-2').stop().fadeOut();
});

http://www.webmasterworld.com/forum83/7828.htm http://api.jquery.com/hover/ http://api.jquery.com/stop/ http://api.jquery.com/fadeOut/ http://api.jquery.com/fadeIn/

但是，在所有其他浏览器中，这种方法仍然会产生比 CSS3 方法更差的结果，因此理想情况下，您可以同时使用这两种方法，并使用 if 语句控制 HTML、CSS 和 JS 来检测 IE。此外，IE9 确实支持 rgba，但不支持转换，因此对于世界上最好的场景，您将拥有 ie6-8 的 IE 版本，一个使用 jQuery 颜色插件的版本：

http://www.bitstorm.org/jquery/color-animation/

适用于 IE9 和适用于所有其他浏览器的简单 CSS3。

或者你可以说，'嘿，淡入淡出对我的设计来说并不那么重要，如果那些没有更新浏览器的人错过了也没关系。这是我强烈推荐的。

Answer 2

我希望这会给你一个想法和一个开始，很容易

        <script src="http://code.jquery.com/jquery-latest.js"></script>
         <script type="text/javascript">
          $(".yourCssClassNameHere").hover(funcOver, funcOut);
              function funcOver() {
                $("#Id of You want to fade in").fadeIn(100);//time is in ms
                }
               function funcOut() {
                $("#Id of You want to fade out").fadeOut(100);
                 }
           </script>

此解决方案的另一种变体是使用匿名函数，正如 @Joseph Torraca 在他的回复中显示的那样。

要使特定的<li> 在悬停时淡出，我已经测试过了，试试这个：

  <ul>
   <li onmouseover="$(this).fadeOut()">Hover me to disappear</li>
  </ul>

更多信息：
http://api.jquery.com/hover/
http://www.w3schools.com/jquery/event_hover.asp
淡入
http://api.jquery.com/fadeIn/
淡出
http://api.jquery.com/fadeOut/