If you want to achieve a smooth transition effect, the easiest way is using CSS3 transitions. Here's an example:
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);
}
In this code, the transition occurs between the two RGBA versions of transparent colors. While jQuery can also be used for this purpose, it is more complex and may not provide as smooth animations. Additionally, fading between transparent colors and RGBA is not supported in IE. This CSS technique ensures that IE will display the design properly with fallback options if RGBA is not supported.
For IE support, a method involving multiple div elements can be utilized:
<li id="wrap">
<div id="content">
Content
</div>
<div id="fade-1"></div>
<div id="fade-2"></div>
</li>
CSS styling for these elements:
#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;
}
Javascript implementation:
$('#wrap').hover(function(){
$('#fade-1').stop().fadeOut();
$('#fade-2').stop().fadeIn();
}, function(){
$('#fade-1').stop().fadeIn();
$('#fade-2').stop().fadeOut();
});
References and additional resources:
For optimal results across different browsers, consider using both CSS3 transitions and jQuery based on browser detection. You can also explore plugins like the jQuery Color Animation for specific browser compatibility requirements.
Ultimately, prioritize functionality over cross-fade effects to ensure a consistent user experience for all visitors, especially those using older browsers.