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

Question

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

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

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> 悬停顺利过渡。

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。

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