My slideshow has gone through several iterations, but it has never shaken off this issue. It will run for a while as expected, then suddenly begin switching slides without any delay. If it weren’t for the animation it’d probably run at light-speed…
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="Description" content="Calvary Chapel Chico is a non-denominational,Bible-believing church established to worship,glorify,and share the good news of our Lord and Savior,Jesus Christ." />
<title>Calvary Chapel Chico</title>
<!--<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold"/>-->
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="Top450">
<div id="TitleBar">
<div id="Logo"></div>
<h1>Calvary Chapel Chico</h1>
<a id="Login" href="">Login</a>
</div>
<div id="SlideShow">
<div id="Banner">
<div id="SMedia">Insert Media Links Here</div>
<div id="SMinistries">Insert Ministry links Here</div>
<div id="SServiceTimes">Insert Service Times Here</br><div style="background:#fff;">TEST</div></div>
<div id="SWelcome">Welcome to</br><span id="WelcomeText">Calvary Chapel Chico Online</span></div>
<a id="S5" href="2.html">2</a>
<a id="S6" href="2.html">3</a>
<a id="S7" href="2.html">4</a>
</div>
</div>
<div id="MenuBar">
<div class="Pages">
<a id="Home" href="2.html" class="current">Home</a>
<a id="About" href="2.html">About</a>
<a id="Media" href="#" rel="1" class="SlidePage">Media</a>
<a id="Ministries" href="#" rel="2" class="SlidePage">Ministries</a>
<a id="ServiceTimes" href="#" rel="3" class="SlidePage">Service Times & Directions</a>
</div>
<div class="BannerButtons">
<a href="#" rel="4"></a>
<a href="#" rel="5"></a>
<a href="#" rel="6"></a>
<a href="#" rel="7"></a>
</div>
</div>
</div>
<div id="Body">
<div id="Left300">
<div id="LeftTopTabs" class="Tabs">
<div id="LeftTopTabBar" class="TabBar">
<a href="#LTT-1">News</a>
<a href="#LTT-2">Media</a>
<a href="#LTT-3">Calendar</a>
</div>
<div id="LeftTopPanes" class="Panes">
<div id="LTT-1">Lorem ipsum dolor sit amet</div>
<div id="LTT-2">Nunc in tempor sem.</div>
<div id="LTT-3">Sed diam nisl,</div>
</div>
</div>
</div>
<div id="Right700">
Lorem ipsum dolor sit amet
</div>
</div>
<div id="Bottom450">
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</html>
javascript:
$(
function() {
//===================================================================================================================================
//Setup
//===================================================================================================================================
//Initialize variables
var Pause
var NextSlide
var RepeatTimer
var SlideshowTimer
var $CurrentSlide
//Slideshow setup
$(".BannerButtons a:first").addClass("current");//Force the first slide's button to be the "CurrentSlide"
$(".BannerButtons").show();
var SlideWidth=$("#SlideShow").width();
$("#Banner").css({'width':[SlideWidth*[$("#Banner>*").size()]]});
//Tabs setup
var $CurrentTab=$(".TabBar a:first").next();
//===================================================================================================================================
//Slideshow Functions
//===================================================================================================================================
//Move to the Next Slide
NextSlide=function(){
var image_reelPosition=[$CurrentSlide.attr("rel")-1]*SlideWidth;//Computes distance to the left edge of the slide in pixels
$(".BannerButtons a,.SlidePage").removeClass("current");//Make the old "CurrentSlide" no longer the "CurrentSlide"
$("#Banner").animate({left:-image_reelPosition},900);//Next slide animation
$CurrentSlide.addClass("current");//Make the new "CurrentSlide" current
};
//Repeat slide changes
RepeatTimer=function(){
$CurrentSlide=$('.BannerButtons a.current').next();//Make the next "CurrentSlide" current
if($CurrentSlide.length===0){$CurrentSlide=$('.BannerButtons a:first');};//If end of buttons is reached, go back to the beginning
NextSlide();//Go to the next slide
SlideshowTimer();
};
//Repeat slide changes every 10 seconds
SlideshowTimer=function(){
clearTimeout(Pause);//Clear the timer
Pause=setTimeout(RepeatTimer,10000);//Reset the timer
};
//Hover
$("#Banner").hover(
function(){//Hover trigger
clearTimeout(Pause);//Clear the timer
},function(){//Cease to hover trigger
Pause=setTimeout(RepeatTimer,2000);//Reset the timer
});
//Click
$(".BannerButtons a,.SlidePage").click(
function(){
$CurrentSlide=$(this);//Make the clicked object the "CurrentSlide"
clearTimeout(Pause);//Clear the timer
NextSlide();//Go to the clicked slide
SlideshowTimer();//Reset the timer
return false;//Keep the # out of the URL
}
);
//===================================================================================================================================
//Tab Functions
//===================================================================================================================================
//Move to the clicked tab
ChangeTab=function(){
$(".TabBar>a").removeClass("current");
$CurrentTab.addClass("current");//Force the first slide's button to be the "CurrentTab"
$CurrentPane=$($CurrentTab.attr("href"));
$(".Panes>div").addClass("HiddenPane");
$CurrentPane.removeClass("HiddenPane");
};
//Click
$(".TabBar>a").click(
function(){
$CurrentTab=$(this);//Make the clicked object the "CurrentSlide"
ChangeTab();//Go to the clicked tab
return false;//Keep the # out of the URL
}
);
//===================================================================================================================================
//Start Slide Show
SlideshowTimer();
//Initialize Tabs
ChangeTab();
//END
}
);
Found it! Turns out it was a Browser/Javascript issue. I didn’t realize just how jQuery queues up all the animations by default.
So, first off, page loaded, everything was fine. No timing issues. Then I go to another tab and leave my page open. That’s where this is stemming from. The browser somehow is locking jQuery out of animating the animations (not immediately though) with CSS changes when it wants to. But at the same time the Javascript timer does continue. All the while jQuery is building a queue of un-performed animations. When you reopen the tab the browser let’s jQuery have its way and begins running all the queued animation back-to-back. At which point the timer script is still running, but it only gets to add changes to the queue. And so it appears that the timer has failed.
THE FIX
I changed:
to:
And that’s it, jQuery knows that building a queue is not desirable for some animations, so it includes a fix.