...

View Full Version : 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.


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:

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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum