How do i fade this background when adding the class.

[attila2452]

HTML:

<div id="quick-links-container"><div id="quick-links"><ul>    <li><span id="website-design" class="active">Website Design</span></li>    <li><span id="graphic-design">Graphic Design</span></li>    <li><span id="wordpress">Wordpress</span></li></ul></div><div id="quick-information"><div class="website-design"><h3>Website Design</h3>    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>    <br /><a href="#">Website Design</a></div><div class="graphic-design"><h3>Graphic Design</h3>    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p><br /><a href="#">Graphic Design</a></div><div class="wordpress"><h3>Wordpress</h3>    <p>A massive open source CMS with thousands of secure plug-ins to choose from to customize your website. Wordpress also allows you to manage your website’s content from anywhere between a personal blog to a distinguished online store.</p><br /><a href="#">Wordpress.org</a></div></div><div class="both"></div></div>

CSS:

#quick-links-container{width:960px; height:205px;}#quick-links-container #quick-links{width:200px; display:block; float:left; margin: 0 20px; padding-right:40px;}#quick-links ul{list-style: none;}#quick-links ul li{}#quick-links ul li span{    cursor:pointer;    width:200px;    height:35px;    line-height:35px;    display:block;    margin:10px 0;    padding:10px 20px;    background-color:#e4e4e4;    color:#333333;    text-shadow: 1px 1px 1px #FFF;    text-decoration:none;    font-family:Palatino Linotype;    font-style:italic;    font-size:18px;}#quick-links li span.active{    background-color:#fcae00;    color:#FFFFFF;    text-shadow: 1px 1px 1px #eea607;}#quick-information{overflow: hidden;height:200px;width: 630px;margin-left: 50px;}#quick-information h3{color:#fcae00; font-family:"Palatino Linotype"; font-style: italic; font-size:24px; margin-top: 10px; margin-left:20px;}#quick-information p{color:#505050; padding:20px 10px 0 20px; font-family:Palatino Linotype; font-size:17px;}#quick-information a{color:#FFFFFF; background-color:#3B3B3B; padding:5px 8px; margin-left:20px; text-decoration:none;font-family:Palatino Linotype; font-style:oblique; font-style:italic; font-size:18px; line-height:35px;}

jQuery:

$(document).ready(function(){    $("#quick-information div").not($("#quick-information div").eq(0)).hide();     $('#quick-links ul li span').click(function(){  $("#quick-information div").slideUp();  $('#quick-links ul li span').removeClass('active');  $(this).addClass('active');	  var classref= $(this).attr("id");	  $("#quick-information ."+classref).slideDown();  });   });

OR http://jsfiddle.net/attilahajzer/B4xZ3/2/

[dsonesuk]

Are you talking about applying a gradual fade, or just set opacity straight out? Input, input johnny 5 needs input.

[attila2452]

fading the background from default to active. grey to orange.

[dsonesuk]

HTML

<div id="quick-links-container"><div id="quick-links"><ul>	<li><b></b><span id="website-design" class="active">Website Design</span></li>	<li><b></b><span id="graphic-design">Graphic Design</span></li>	<li><b></b><span id="wordpress">Wordpress</span></li></ul></div><div id="quick-information"><div class="website-design"><h3>Website Design</h3>	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>	<br /><a href="#">Website Design</a></div><div class="graphic-design"><h3>Graphic Design</h3>	<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p><br /><a href="#">Graphic Design</a></div><div class="wordpress"><h3>Wordpress</h3>	<p>A massive open source CMS with thousands of secure plug-ins to choose from to customize your website. Wordpress also allows you to manage your website’s content from anywhere between a personal blog to a distinguished online store.</p><br /><a href="#">Wordpress.org</a></div></div><div class="both"></div></div>

CSS

#quick-links-container{width:960px; height:205px;}#quick-links-container #quick-links{width:200px; display:block; float:left; margin: 0 20px; padding-right:40px;}#quick-links ul{list-style: none;}#quick-links ul li{position:relative; height:55px; width:240px; margin:5px 0; }#quick-links ul li span, #quick-links ul li b{	cursor:pointer;	width:240px;	height:55px;	line-height:55px;	display:block;	/*margin:5px 0;*/	padding:0;	background-color:#e4e4e4;	color:#333333;	text-shadow: 1px 1px 1px #FFF;	text-decoration:none;	font-family:Palatino Linotype;	font-style:italic;	font-size:18px;	text-indent:20px;}#quick-links li span.active{	background-color:#fcae00;	color:#FFFFFF;	text-shadow: 1px 1px 1px #eea607;}#quick-information{overflow: hidden;height:200px;width: 630px;margin-left: 50px;} #quick-information h3{color:#fcae00; font-family:"Palatino Linotype"; font-style: italic; font-size:24px; margin-top: 10px; margin-left:20px;}#quick-information p{color:#505050; padding:20px 10px 0 20px; font-family:Palatino Linotype; font-size:17px;}#quick-information a{color:#FFFFFF; background-color:#3B3B3B; padding:5px 8px; margin-left:20px; text-decoration:none;font-family:Palatino Linotype; font-style:oblique; font-style:italic; font-size:18px; line-height:35px;} #quick-links ul li b {	background-color: #E4E4E4;font-weight:normal;	width:240px;	height:100%;	display:none;	position:absolute;	top:0;	left:0;}

JQuery

$(document).ready(function(){	$("#quick-information div").not($("#quick-information div").eq(0)).hide();    $("#quick-links ul li b").not($("#quick-links ul li b").eq(0)).show();	$('#quick-links ul li span').each(function(){		$(this).prev("b").html($(this).html());	});		  $('#quick-links ul li b').click(function(){	  $("#quick-links ul li b").show();	  $(this).fadeOut("slow");  $("#quick-information div").slideUp();  $('#quick-links ul li span').removeClass('active');  $(this).next("span").addClass('active'); 	  var classref= $(this).next("span").attr("id");	  $("#quick-information ."+classref).slideDown();  });	});

Edited January 16, 2012 by dsonesuk