I have an image slider and a function that fades one image in, delays for 5 seconds, then fades out.
By clicking a button which is generated via JQuery you can switch directly to a certain image. The current image is to be faded out before. After the selected image is shown, the slideshow is to go on from that point on.
Problem: The delay getting significantly shorter when I click one of the direct access buttons. I don't know why that is happening?
Code:
$(document).ready(function(){
var index = 0;
var bilder=[
["HA_Promo_1.jpg","(a Link here)"],
["HA_Promo_2.jpg","(a Link here)"],
["HA_Promo_3.jpg","(a Link here)"],
["HA_Promo_4.jpg","(a Link here)"],
["HA_Promo_5.jpg","(a Link here)"],
["HA_Promo_6.jpg","(a Link here)"]
];
$(bilder).each(function() {
$("#linkleiste").append("<span class=\"klick\">" + ($(bilder).index(this)+1) + "</span>");
});
$(".klick").click(function() {
index=$(this).text();
$("#promo_slider").clearQueue().fadeOut(500,runIt);
});
function runIt() {
$(".blink").remove();
if(index==bilder.length) index=0;
diesbild="<a class=\"blink\" id=\"" + "promo_a" + index + "\" href=\"" + bilder[index][1]+ "\"><img src=\"./images/" + bilder[index][0]+ "\" alt=\"\" title=\"\" /></a>";
index++;
$("#promo_slider").append(diesbild).fadeIn(500).delay(5000).fadeOut(500, runIt);
}
runIt();
});
I got better results using setTimeout() instead of delay(). Apparently, stop() does not cancel a delay. From the documentation:
The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
Demonstrative snippet, below:
$(document).ready(function() {
var index = 0;
var loopTimer;
var bilder = [
["http://lorempixel.com/200/200/abstract/1/", "(a Link here)"],
["http://lorempixel.com/200/200/abstract/2/", "(a Link here)"],
["http://lorempixel.com/200/200/abstract/3/", "(a Link here)"],
["http://lorempixel.com/200/200/abstract/4/", "(a Link here)"],
["http://lorempixel.com/200/200/abstract/5/", "(a Link here)"],
["http://lorempixel.com/200/200/abstract/6/", "(a Link here)"]
];
$(bilder).each(function() {
$("#linkleiste").append("<span class=\"klick\">" + ($(bilder).index(this) + 1) + "</span>");
});
$(".klick").click(function() {
clearTimeout(loopTimer);
index = $(this).text() - 1;
runIt();
});
function runIt() {
if (index == bilder.length) index = 0;
diesbild = "<a class=\"blink\" id=\"" + "promo_a" + index + "\" href=\"" + bilder[index][1] + "\"><img src=\"" + bilder[index][0] + "\" alt=\"\" title=\"\" />" + (index + 1) + "</a>";
index++;
$("#promo_slider").fadeOut(500, function() {
$(this).html(diesbild).fadeIn(500);
loopTimer = setTimeout(runIt, 5000);
});
}
runIt();
});
.klick {
margin-left: 20px;
margin-right: 20px;
}
.klick:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="linkleiste"></div>
<div id="promo_slider"><span class="blink"></span></div>
Here's a jFiddle, too.