How to Make Hover Background Fade Smoothly In and Out?


Tags: javascript,jquery,css,xhtml

Problem :

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.



Solution :

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.


    CSS Howto..

    how to manage layers in position:absolute css block

    How to make all input boxes ordered in a straight line? [closed]

    How can I make the left div expand and the right div have constant width?

    How to change font size for safari and opera but not chrome in CSS file.

    How to avoid css overlapping?

    How to have CSS animation only on click and not on page load?

    How php execute in file with extension .ctp in cakephp?

    How to vertically align and stretch content using CSS flexbox

    How to make page border in print CSS for every single page

    How to get a background image to print using css?

    How can I use True Type Collection (.ttc) in JavaFX?

    How to fix side bar and header using CSS for JS & jQuery Scroller

    How to manage magento CSS file with over 10,000 lines?

    Show Content if below specific width

    How can I set a specific border around an element?

    how can assign left of div to left of screen when margin set to auto?

    How to overlap divs in html

    How do I position a Silverlight Control

    How to align text within div?

    How to apply CSS directives to h3 element?

    How to change the value depend on css animation?

    How to indent items of a sublist using css and html in wordpress

    how can bring to front clicked div in jquery?

    GWT how to add css style on Image Resource

    How can I center vertically a div with position absolute and hight = 100px on another div with position relative but with not standard height

    How to create an ActionImage from a CSS Sprite

    Javascript: How do I get the id of a clicked link and then style it in css

    How to make width grow slowly when I add element?

    How to add css for specific input type text

    How would I make this into an dynamic :nth-child css selector [duplicate]