JQuery clearInterval() is adding a delay

StackOverflow https://stackoverflow.com/questions/17415247

Question

I am making a photo slider for my website and didn't get any answers on my previous question so I managed to figure it out myself.

Everything is running fine but I have a navigation bar for my slider, and when you click on a title in the bar, the photo relevant to that title shows up. I'm using clearInterval() to achieve this, but it is causing a delay when you click. So instead of clicking on the title and the picture immediately switches, a few seconds go by and then finally the image shows up. I'd like to avoid this delay. Any ideas? Here is my code:

HTML:

<body onload="slider();">
<div id="slider">
 <div class="slider">
  <a href="#"><img id="1" src="2013Sealbeach.jpg" border="0" /></a>
  <a href="#"><img id="2" src="sns-homeintro-WEB.jpg" border="0" /></a>
  <a href="#"><img id="3" src="2013facebookad.jpg" border="0" /></a>
 </div> <!-- /.slider -->

  <div class="sliderBar">
          <div id="one" class="sliderBarDiv"><p id="sliderBarNavs">Seal Beach Bodyboarding</p></div>
          <div id="two" class="sliderBarDiv"><p id="sliderBarNavs">The Team</p></div>
          <div id="three" class="sliderBarDiv"><p id="sliderBarNavs">Second Nature Skimboarding</p></div>
  </div> <!-- /.sliderBar -->
</div> <!-- /#slider -->
</body>

CSS:

#sliderBarNavs /* the text for the slider bar */
{
    margin:auto;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    color:#999;
    text-align:center;
    padding:5px;
}
#sliderBarNavs:hover
{
    color:#9CF;
}
#slider
{
    width:750px;
    height:536px;
    float:left;
    overflow:hidden;
}
.slider
{
    width:750px;
    height:486px;
    overflow:hidden;
    float:left;
    background-image:url(Loading.gif);
    background-repeat:no-repeat;
    background-position:center;
}
.slider img
{
    width:750px;
    height:486px;
    display:none;
}
.sliderBar
{
    width:750px;
    height:40px;
    float:left;
    background-color:#FFF;
}
.sliderBarDiv
{
    width:140px;
    height:40px;
    float:left;
    background-color:#FFF;
    border-right:1px solid #CCC;
    border-left:1px solid #CCC;
    cursor:pointer;
}
.sliderBarDiv:hover
{
    background-color:#f4f4f4;
}

JQuery:

function slider() {
$(".slider #1").fadeIn(500);
$(".slider #1").delay(5000).fadeOut(500);

var sc=$(".slider img").size();
var count=2;
var pause;

pause = setInterval(function() {
                     $(".slider #"+count).fadeIn(500).delay(5000).fadeOut(500);
                     if(count==sc){
                         count = 1
                     }else{
                         count = count + 1;
                     }
                     }, 6000);

$("#one, #two, #three").click(function(){
                       clearInterval(pause);
                         });
}

$(document).ready(function(){ // to navigate through the images once the setInterval has been cleared:

$("#one").click(function(){
            $(".slider #1").fadeIn(500);
                         });
$("#two").click(function(){
            $(".slider #1").fadeOut(250);
            $(".slider #2").fadeIn(250);
                         });
$("#three").click(function(){
            $(".slider #1").fadeOut(250);
            $(".slider #3").fadeIn(250);
                         });
$("#three").click(function(){
            $(".slider #2").fadeOut(250);
            $(".slider #3").fadeIn(250);
                         });
});

The pictures I used are on local file so anyone who helps me with this is going to need to use pictures from online, other than that anyone who can help me would be great, this is really frustrating and I can't find answers anywhere else. Also, I know that there is probably an easier way to code most of the JQuery to make it more compressed, but I'm pretty new to js and JQuery so that's the best I could do. Thanks!

Was it helpful?

Solution

Replace in jQuery this code

$(".slider #1").delay(5000).fadeOut(500);

with this

setTimeout(function(){
    $(".slider #1").fadeOut(500);
},5000)

And it will work (tested).

jsFiddle: http://jsfiddle.net/enve/C398M/2/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top