Reputation: 769
In my simple javascript slide show I just want it to cycle through (at max of 5) divs that auto populate from a database. It populates and starts doing the slide show fine, but once it is suppose to loop it goes to a "blank" slide, then to the last one again and the it start cycling normally forever.
With this example I have to look at and play with it I am using two divs.
It can be viewed here: www.codekrewe.com/fbla
and the javascript code is here:
$(function() {
$('#dateHolder .featureHolder:gt(0)').hide();
setInterval(function() {
$('#dateHolder .featureHolder:first').fadeOut(1000)
.next('.featureHolder').fadeIn(1000)
.end().appendTo('#dateHolder');
}, 3000);
});
EDIT: I changed the JavaScript, the JS in the code block above is what I have now. However, I get the same problem.
Now with three divs in the slideshow you can see it is just the first slide that gets blanked out on the second loop through.
Upvotes: 0
Views: 239
Reputation: 769
Well I found the fix for this, not quite sure why it had such an effect.
After all of the divs were called, a little <h1>
was made to say featured divs in the holding box. Well that was getting pushed up with each slide changing, and once it reached the top it caused a blank slide.
So moving the <h1>
to the top before the divs were called, fixed the blank slide issue.
Upvotes: 2