Reputation: 3002
I have Jquery code where in I use setTimeout to display and hide my divs so it can display the given data, but what I need is to display and not to hide the last Div any idea how to do this ? attached here is my code
JS Code
$(function() {
// Start showing the divs
//showDiv();
showDiv2();
});
function showDiv2() {
// If there are hidden divs left
if($('.forSlowMo:hidden').length) {
// Fade the first of them in
$('.forSlowMo:hidden:first').fadeIn();
$( ".forSlowMo" ).fadeOut( 1500, function() {});
// And wait one second before fading in the next one
setTimeout(showDiv2, 100);
}
}
Upvotes: 2
Views: 61
Reputation: 2147
Could this be your answer?
customfadeOut($('.forSlowMo').first())
function customfadeOut(element) {
if (element.length) {
element.fadeOut({
duration: 1500,
easing: 'linear',
done: function() {
customfadeOut(element.next('.forSlowMo'));
}
});
}
}
.forSlowMo {
margin-bottom: 25px;
padding: 25px 5px;
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="forSlowMo">first content</div>
<div class="forSlowMo">second content</div>
<div class="forSlowMo">third content</div>
<div class="forSlowMo">fourth content</div>
Upvotes: 1
Reputation: 1594
$(function() {
// Start showing the divs
//showDiv();
showDiv2();
});
function showDiv2() {
// If there are hidden divs left
if($('.forSlowMo:hidden').length) {
// Fade the first of them in
$('.forSlowMo:hidden:first').fadeIn();
if($('.forSlowMo:hidden').length > 1)
$( ".forSlowMo" ).fadeOut( 1500, function() {});
// And wait one second before fading in the next one
setTimeout(showDiv2, 100);
}
}
Upvotes: 2