StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can do this most easily with css3 transitions like this:</p> <pre><code>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); } </code></pre> <p>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). </p> <p>IE supported method, (brace yourself):</p> <pre><code> <li id="wrap"> <div id="content"> Content </div> <div id="fade-1"></div> <div id="fade-2"></div> </li> </code></pre> <p>CSS</p> <pre><code>#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; } </code></pre> <p>JS:</p> <pre><code>$('#wrap').hover(function(){ $('#fade-1').stop().fadeOut(); $('#fade-2').stop().fadeIn(); }, function(){ $('#fade-1').stop().fadeIn(); $('#fade-2').stop().fadeOut(); }); </code></pre> <p><a href="http://www.webmasterworld.com/forum83/7828.htm" rel="nofollow">http://www.webmasterworld.com/forum83/7828.htm</a> http://api.jquery.com/hover/ <a href="http://api.jquery.com/stop/" rel="nofollow">http://api.jquery.com/stop/</a> http://api.jquery.com/fadeOut/ <a href="http://api.jquery.com/fadeIn/" rel="nofollow">http://api.jquery.com/fadeIn/</a></p> <p>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:</p> <p><a href="http://www.bitstorm.org/jquery/color-animation/" rel="nofollow">http://www.bitstorm.org/jquery/color-animation/</a></p> <p>for IE9 and the simple CSS3 for all other browsers.</p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload