Slideshow too fast when coming back from another tab

Question

The slideshow on the Homepage is too fast when coming back from another tab. I tried a few other solutions from the site but it did not work in my case. Hope someone can really help. Thanks much.

Here's the Javascript:

Blockquote

    $("#slideshow > div:gt(0)").hide();

    setInterval(function() {
    $('#slideshow > div:first')
   .fadeOut(1000)
   .next()
   .fadeIn(1000)
   .end()
   .appendTo('#slideshow');

   }, 5000);

Blockquote

HTML Code:

Blockquote

    <div id="slideshow">
    <div>
        <img src="abc.png">
    </div>
    <div>
        <img src="def.png">
    </div>
    <div>
        <img src="ghi.png">
    </div>
    <div>
        <img src="jkl.png">
        </div>
    </div>

Blockquote

Blockquote

     /*Slideshow */
     #slideshow > div {
     width: 970px;
     height: 500px;
     display: block;
     float: left;
     position: absolute;
     top: 200px;
     right: auto;
     background-repeat: no-repeat;
     margin-left: 15px;
     line-height: 180px;

}

Blockquote

Answer 1

If it's too fast, just increase the time to fadeOut() and fadeIn() . Use $(window).focus() and $(window).blur() to check when a user left the tab and clear the slideshow interval. When the user comes back, set the interval again.

  $("#slideshow > div:gt(0)").hide(); var slideshow = setInterval(function() { beginSlideshow(); }, 5000); function beginSlideshow(){ $('#slideshow > div:first') .fadeOut(2000)//time doubled from 1000 to 2000 milliseconds .next() .fadeIn(2000)//time doubled from 1000 to 2000 milliseconds .end() .appendTo('#slideshow'); } $(window).focus(function() { if (slideshow==null){ //Use came back to the tab slideshow = setInterval(function(){ beginSlideshow(); }, 5000); } }); $(window).blur(function() { //User left tab clearInterval(slideshow); slideshow = null; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="slideshow"> <div> <img src="test9/SitePage_9dArip.png"> </div> <div> <img src="test9/SitePage_9dCand.png"> </div> <div> <img src="test9/SitePage_9dfinalOK.png"> </div> <div> <img src="test9/SitePage_9dPrav.png"> </div> </div> 

JSFiddle： http://jsfiddle.net/1vk3fqr8/3/