Fade In / Fade Out through an unknown number of Divs, with a delay between
I searched and tried my best but couldn't figure out how to achieve the following:
- Scroll through unknown number of divs
- There is some kind of animation (maybe just a 110% increase in width)
- Each Div fade in / out
- Delay between div finally fading out and div first fading out again
My current code looks like this
Html
<div class="container">
<div class="popup">Popup 1</div>
<div class="popup r">Popup 2</div>
<div class="popup b">Popup 3</div>
<div class="popup g">Popup 4</div>
<div class="popup y">Popup 5</div>
</div>
CSS
.popup {
display: none;
width: 400px;
height: 80px;
background: #000;
color: #fff;
line-height: 80px;
text-align: center;
}
.r{background:red}
.b{background:blue}
.g{background:green}
.y{background:yellow}
JQuery
var popups = $('.popup');
var i = 0;
function step() {
if (i >= popups.length)
i = 0;
$(popups[i]).fadeToggle(300);
i++;
}
setInterval(step, 2000);
As you can see my divs don't disappear until everything is shown, this is not desirable.
+3
source to share
3 answers
You can combine animations using delay
between:
function next() {
if (i >= popups.length)
i = 0;
popups.eq(i).fadeIn(300).delay(2500).fadeOut(300).delay(1000).queue(function(){
next();
$(this).dequeue();
});
i++;
}
next()
(note: I used popups.eq(i)
which is the same as $(popups[i])
)
Live example: http://jsfiddle.net/3ujb7k4L/7/
+3
source to share
Something like that?
var popups = $('.popup');
var i = 0;
function fadeOutLater(popup) {
setInterval(function() {
popup.fadeOut(500);
}, 5000);
}
function step() {
var popup;
if (i >= popups.length)
i = 0;
popup = $(popups[i]);
popup.fadeIn(300, fadeOutLater(popup));
i++;
}
setInterval(step, 2000);
0
source to share
To create a longer pause between hiding the last item and re-showing the first item, you can skip one fadeIn / fadeOut loop when resetting the counter:
var popups = $('.popup');
var i = 0;
function step() {
if (i >= popups.length) {
i = 0;
} else {
$(popups[i]).delay(300).fadeIn(300).delay(200).fadeOut(300).delay(200);
i++;
}
}
setInterval(step, 2000);
Like here: http://jsfiddle.net/r72qpher/
0
source to share