JQuery addClass opacity function fade through images - Solve a Fiddle

This function uses JQuery and UI to fade images through one another in a gallery. I am getting very strange results. On our site it appears the images are not timing themselves correctly and fading seemingly intimitantly.

Anyway I built a Fiddle http://jsfiddle.net/TGgc5/17/

This fiddle does not function at all, ie. nothing happens yet as far as I can see it has all the resources it needs.

Can anyone solve the fiddle

- Images should fade smoothly through each other creating a lovely transition effect.

Any ideas?

Marvellous

UPDA开发者_如何学编程TE - Getting there but still not quite http://jsfiddle.net/TGgc5/39/

1. Watch the transition between the last slide and the first one. It is static not fading through.
2. When a thumbnail is clicked it needs to perform the function and reset the timer.

Any ideas?

---

Here: http://jsfiddle.net/7QrbE/

Some mistakes corrected:

• No need to set opacity by changing class, just use hide/fadeIn/fadeOut
• Remember to clearTimeout using a global var, or else the timer will override real clicks
• first() don't work in this case, just call '.thumbs.first'
• had to reformulate the condition of the loop end (checking if the next element don't have the class thumb)
• fadeOut only the current photo

Final code:

$(".cornerimg").hide(); // Hide all 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();

---

Using jQuery' UIs addClass() and switchClass() for animation doesn't really work cross-browser in my experience. Theres issues in Firefox not getting quiet to full opacity, and it doesn't work in anything less than IE 9 as they don't support filters ( scalar values only). In a nutshell it doesnt seem to share the same support as the animate() function. So if you want to use CSS, I suggest you use CSS3 transitions and the jQuery animateToSelect plugin as fallback - this plugin isn't perfect as you need to specify the specific rules you want to "extract" from your class but it might help