My Javascript slideshow works, except for the first two images act clunky. The images "skip" in, then seem to get caught when they're supposed to fade. The slideshow also starts with the last image instead of the first, which is why I have moved the images in the HTML out of order. What is causing this in the code?
The Javascript:
<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(10000)
.next()
.fadeIn(10000)
.end()
.appendTo('#slideshow');
}, 10000);
</script>
The HTML:
<div id="slideshow">
<div>
<img src="img/2.jpg">
</div>
<div>
<img src="img/3.jpg">
</div>
<div>
<img src="img/1.jpg">
</div>
</div>
The CSS:
#slideshow {
position: relative;
width: 100%;
height: 350px;
}
#slideshow > div {
position: absolute;
}
I discovered that my code will work the way I need if I add the same number of next/fadein/end sequences as photos I have. So, in this case, that's three, so I should have three next/fadein/ends before the appendTo.
This makes the transition to the next image fade, not jump.
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(5000)
.next()
.fadeIn(5000)
.end()
.next()
.fadeIn(5000)
.end()
.next()
.fadeIn(5000)
.end()
.appendTo('#slideshow');
}, 5000);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments