javascript - JQuery addClass opacity function fade through images - Solve a Fiddle -

this function uses jquery , ui fade images through 1 in gallery. getting strange results. on our site appears images not timing correctly , fading seemingly intimitantly.

anyway built fiddle http://jsfiddle.net/tggc5/17/

this fiddle not function @ all, ie. nothing happens yet far can see has resources needs.

can solve fiddle
- images should fade smoothly through each other creating lovely transition effect.

any ideas?

marvellous

update - getting there still not quite http://jsfiddle.net/tggc5/39/

1. watch transition between last slide , first one. static not fading through.
2. when thumbnail clicked needs perform function , reset timer.

any ideas?

here: http://jsfiddle.net/7qrbe/

some mistakes corrected:

• no need set opacity changing class, use hide/fadein/fadeout
• remember cleartimeout using global var, or else timer override real clicks
• first() don't work in case, call '.thumbs.first'
• had reformulate condition of loop end (checking if next element don't have class thumb)
• fadeout current photo

final code:

$(".cornerimg").hide(); // hide images var slideshowto, slide; // global vars  $('.thumbs').click(function() {     if (slide) $('#p' + slide).fadeout(2000);     slide = $(this).attr('id');     $('#p' + slide).fadein(2000);     cleartimeout(slideshowto);     slideshowto = settimeout(function() {         var next = $('#' + slide).next();         if (next.hasclass('thumbs'))             next.click();         else             $('.thumbs:first').click();      }, 4000);  }); $('.thumbs:first').click();