Question

I’m having an issue with a site I’m working on. It’s not only this site but another one that I have made with a Jquery slider. They both have different plugins. Issue is that when you change tabs the slider gets all crazy when you go back… especially in Chrome. the site is http://www.firedogpr.com/index.php. I’ve read about this issue but I’m no JS wizard, so any help would be greatly appreciated.

For some reason, it currently does not work in Windows at all. I’m also looking into that.

I’ve basically taken the code from http://www.snowdenindustries.com and adapted it. here is the snippet of js that may be the issue

if ($("#mainSlide").length>0) {
    $("#mainSlide div.slide").hide();
    $("#mainSlideNav li a:first").addClass("cur");
    $("#mainSlide div.slide:first").show();


    $("#mainSlideNav li a").click(function() {
        $("#mainSlideNav li a").removeClass("cur");
        $(this).addClass("cur");
        $("#mainSlide div.slide").removeClass("cur").fadeOut(1200);
        var activeTab = $(this).attr("href");
        $(activeTab).fadeIn(1200).addClass("cur");
        return false;
    });

    function slideTimer() {
        if (!($('#mainSlideNav li a.cur').parent().next().children("a").length>0)) {
            $("#mainSlideNav li a").removeClass("cur");
            $("#mainSlide div.slide").removeClass("cur").fadeOut(1200);
            $("#mainSlideNav li a:first").addClass("cur");
            $("#mainSlide div.slide:first").fadeIn("slow").addClass("cur");
        } else {
            var nextTab = $('#mainSlideNav li a.cur').parent().next().children("a").attr('id');
            var nextDiv = $('#mainSlide div.slide:visible').next().attr('id');
            $("#mainSlide div.slide").removeClass("cur").fadeOut(1200);
            $("#mainSlideNav li a").removeClass("cur");

            $("#"+nextTab).addClass("cur");
            $("#"+nextDiv).fadeIn("slow").addClass("cur");
        }
    }
    var miniCount = setInterval( slideTimer, 5000);
    $("#mainSlideNav li a, #mainHeader").mouseenter( function(){
        clearInterval(miniCount);});
    $("#mainSlideNav,  #mainHeader").mouseleave( function(){
        clearInterval(miniCount);
        miniCount = setInterval(slideTimer, 5000);});
}

Answer 1

The jQuery documentation explicitly says to not use the jQuery animation APIs (like fadeIn) from an interval timer, precisely because they APIs that jQuery uses are suspended in background tabs, so you end up running multiple fade-ins at once.

At least in the old jQuery you’re using; I believe current jQuery fixes that problem.