JQuery Image Gallery fading not always working and IE tragedy - solve a fiddle

问题

This functions uses JQuery and UI to fade images through one another in a gallery. I am getting very strange results.

At the beginning there is a double flash of the first image
The last image does not fade to the first image correctly
The thumbnail (.thumbs) need to animate from where the current animation is and reset the timer
Not functioning correctly in IE 8 (possibly others)

I have set up a fiddle.

http://jsfiddle.net/TGgc5/57/

The code must use the add and remove class functions as it will be controlled by CSS3 transitions on mobile devices instead.

$(document).ready(function(){
    var slideShow;
    var slidefirst = $('.thumbs:first');
    console.log(slidefirst);

    $('.thumbs').click(function() {
        var final = $('.cornerimg').last().attr('id').replace('t','');
        var slide = $(this).attr('id').replace('t','');
        $('.cornerimg').removeClass('cornerimgfocus',2000);
        $('#P' + slide).addClass('cornerimgfocus',2000);
        clearTimeout(slideShow);
        slideShow = setTimeout(function() {
            if ($('#P' + slide) == final) {
                $(slidefirst).click();
            }
            else {
                $('.thumbs').click();
            }

        }, 5000);

    });
    $('.thumbs:first').click();
});

Any ideas?

Marvellous

回答1:

Simple Solution

If anyone else ever needs a JQuery image gallery that defaults to CSS3 transitions for any device that supports these brilliant new features. You need the modernizr plugin and to keep your transition code out of the normal CSS. Then to have another CSS class that you add to all images in the slideshow only if modernizr detects CSS3. That class will contain the CSS3 transition information and only being added now will not bog up non CSS3 devices. Then have a third CSS course with where you want the transition to go and apply the same login using (in this case JQuery addClass / removeClass.

$(document).ready(function(){
    // Standard JQuery Slideshow
    if(!Modernizr.csstransitions) {
    $('.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);

    });
    }
    // CSS Transitions Slideshow
    else if(Modernizr.csstransitions) {
    $('.cornerimg').addClass('cornerimgcss'); 
    var slideShowTO, slide; // Global vars

    $('.thumbs').click(function() {
    if (slide) $('#P' + slide).removeClass('cornerimgfocus');
    slide = $(this).attr('id');
    $('#P' + slide).addClass('cornerimgfocus');
    clearTimeout(slideShowTO);
    slideShowTO = setTimeout(function() {
        var next = $('#' + slide).next();
        if (next.hasClass('thumbs'))
            next.click();
        else
            $('.thumbs:first').click();

    }, 4000);

    });
    }
$('.thumbs:first').click();
});

Marvellous

来源：https://stackoverflow.com/questions/6539420/jquery-image-gallery-fading-not-always-working-and-ie-tragedy-solve-a-fiddle

标签

jquery

fade

image-gallery