Cross Fade & Disect Advice

JavaScript
1

just wondering how I could convert this script to allow me to cross-fade divs.

$(document).ready(function(){
	var imgWrapper = $('#project-piece li');
	var imgNav = $('ul#project-nav li a');
	imgNav.filter(':first').addClass('current');
	// only show the first image, hide the rest
	imgWrapper.hide().filter(':first').show();
			
	$(imgNav).click(function () {
			
	if (this.className.indexOf('current') == -1){
		imgWrapper.hide().fadeOut('slow');
		imgWrapper.filter(this.hash).fadeIn('slow');
		$(imgNav).removeClass('current');
		$(this).addClass('current');
		}
		return false;
	});
});

I did add a fadeOut effect but it’s not working. I actually think I need to disect this code to see why things work.

So let me see if I am right here.

var imgWrapper = $('#project-piece li');
var imgNav = $('ul#project-nav li a');

I start with declaring the variables - that’s simple enough.

imgNav.filter(':first').addClass('current');

I then give a class to the first anchor of the Navigation ul.

imgWrapper.hide().filter(':first').show();

Then the next line looks at hiding all the Project Piece LI’s but filters out the first one, and shows it.

$(imgNav).click(function () {

Ok, and then I am applying a click functionality to the anchors of the Navigation UL’s.

Now this is where I trip up - I don’t understand what this line does exactly:

if (this.className.indexOf('current') == -1){

After my fadeOut code which doesn’t work again I get confused.

imgWrapper.filter(this.hash).fadeIn('slow');

Again, this I don’t fully understand.

$(imgNav).removeClass('current');
$(this).addClass('current');

Any help would be appreciated and give me a better understanding of the language.

2 
if (this.className.indexOf('current') == -1){}

I don’t know Jquery but a clue to the above

If no occurrence of substring is found within string, String.indexOf( ) returns -1.

i.e. if the element doesn’t have a classname of ‘current’ do the following.