jQuery: Content Animator (show/hide/change)

johnfizgerts · 11-10-2009, 10:29 PM

Hey,

I'm working on a script that uses a function (called on click) to change the content of a div (called description) within the page. It contains an unordered list and list items. The first one has the class "show" and the ID "1", the second with just the ID "2", and so forth. (see code below).

I am using jQuery to control the onclick function. the jQuery gets the current object with the "show" class. If there is no show class, it takes the first. It then puts a variable string together that represents the UL LI that is needed to be shown.

Code:

var descurrent = ($('div#description ul li.show')?  $('div#description ul li.show') : $('div#description ul li:first'));
var desclass = '#description li#'+x;

Note: x is a variable transfered from the function change(x); where x is the ID that is to be shown

HTML CODE:

Code:

<div id="description">
					<ul>
						<li class="show" id="1">blahblah
						</li>
						<li id="2">
etc
						</li>
					</ul>

The jQuery i'm trying to get to work is:

Code:

//Hide the current image
		descurrent.animate({opacity: 0.0}, 1000)
		.removeClass('show');
	
		//Show new image
		
		$(desclass).addClass('show')
		.animate({opacity: 1.0}, 1000);

Note: the class "show" has a higer z-index

So basically what I'm having trouble with is hiding one div, and showing another in the same place. From testing it looks like the removeClass and descurrent animate functions are working, but the desclass.addClass isnt. Please help

Thanks in advance,
Hope this can be resolved soon, been giving me headaches!
Cheers,
John