Question

I have a list on my website and the <li> background is a 1 pixel black color image of 30% opacity which repeats to fill the whole <li>. It has a hover, which is a 1 pixel white color image of 2% opacity.

Instead of an instant appearance of the hover background, I want the hover background to smoothly fade in (and out).

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

I think what I want can be achieved with jQuery, but I have no clue how.

EDIT: Simple said, what I want is just to make the hover of the <li>s transition smoothly.

Answer 1

You can do this most easily with css3 transitions like this:

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

Note the transition is occurring between the to rgba versions of your transparent colors. You can achieve the same thing with jQuery, but its much more complicated and will not animate as smoothly. Also fading between transparent colors and rbga is not possible in IE, and with this technique IE will work fine and just wont fade (it falls back to your .png files where rgba is not supported).

IE supported method, (brace yourself):

 <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/

However this method will still yield worse results than the CSS3 method in all other browsers, so ideally you would use both and control the HTML, CSS and JS with an if statement to detect IE. Additionally IE9 does support rgba but not transitions, so for a best of all worlds scenario, you would have the IE version for ie6-8, a version using the jQuery color plugin:

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

for IE9 and the simple CSS3 for all other browsers.

OR you could say, ‘hey cross fades are not that important to my design, its ok if those who have not updated their browser miss out.’ Which is strongly what I would recommend.