使用jQuery连续淡入/淡出多个图像

Question

I'm new to animating with JQuery, and I'm completely lost trying to create the following animation:

I want ONE CUBE at a time to FADE IN for 8 seconds or so and then FADE OUT as the second cube FADES IN and this has to continue FOR ALL 8 CUBES over and over again. Note: There should be only one cube visible at a time.

I have failed to do this in jQuery, but you can check out my fiddle and see if you can correct my code to follow the above instructions, and maybe even simplify the JQuery. I'm also open to CSS3 Animation if you find it a better solution. Thank you for your help!

My Fiddle

This is the JS:

$(function() {
function pulsate(element) {
    $(element || this).delay(3050).fadeOut(300).delay(6050).fadeIn(300, pulsate); 
}
    pulsate($('.bubble1'))
});


$(function() {
function pulsate(element) {
    $(element || this).delay(5000).fadeOut(300).delay(10000).fadeIn(300, pulsate); 
}
    pulsate($('.bubble2'))
});


$(function() {
function pulsate(element) {
    $(element || this).delay(3050).fadeOut(300).delay(6050).fadeIn(300, pulsate); 
}
    pulsate($('.bubble3'))
});


$(function() {
function pulsate(element) {
    $(element || this).delay(5000).fadeOut(300).delay(10000).fadeIn(300, pulsate); 
}
    pulsate($('.bubble4'))
});




$(function() {
function pulsate(element) {
    $(element || this).delay(3050).fadeOut(300).delay(6050).fadeIn(300, pulsate); 
}
    pulsate($('.bubble5'))
});


$(function() {
function pulsate(element) {
    $(element || this).delay(5000).fadeOut(300).delay(10000).fadeIn(300, pulsate); 
}
    pulsate($('.bubble6'))
});


$(function() {
function pulsate(element) {
    $(element || this).delay(3050).fadeOut(300).delay(6050).fadeIn(300, pulsate); 
}
    pulsate($('.bubble7'))
});


$(function() {
function pulsate(element) {
    $(element || this).delay(5000).fadeOut(300).delay(10000).fadeIn(300, pulsate); 
}
    pulsate($('.bubble8'))
});

HTML:

<div class="bubble1">&nbsp;</div>

<div class="bubble2">&nbsp;</div>

<div class="bubble3">&nbsp;</div>

<div class="bubble4">&nbsp;</div>

<div class="bubble5">&nbsp;</div>

<div class="bubble6">&nbsp;</div>

<div class="bubble7">&nbsp;</div>

<div class="bubble8">&nbsp;</div>

CSS:

.bubble1
{
    background: #ff0; position:Absolute; top:20%; left:10%;
    height: 100px;
    width: 100px;

}

.bubble2
{
    background: #333; position:Absolute; top:20%; left:30%;
    height: 100px;
    width: 100px;

}


.bubble3
{
    background: #f90; position:Absolute; top:20%; left:60%;
    height: 100px;
    width: 100px;

}


.bubble4
{
    background: #e43; position:Absolute; top:20%; left:80%;
    height: 100px;
    width: 100px;

}


.bubble5
{
    background: #e38; position:Absolute; top:70%; left:10%;
    height: 100px;
    width: 100px;

}


.bubble6
{
    background: #338; position:Absolute; top:70%; left:30%;
    height: 100px;
    width: 100px;

}




.bubble7
{
    background: #fdd; position:Absolute; top:70%; left:60%;
    height: 100px;
    width: 100px;

}


.bubble8
{
    background: #53d; position:Absolute; top:70%; left:80%;
    height: 100px;
    width: 100px;

}

Answer 1

Using script can make your code easy to be managed but still a pure CSS solution always has its own advantage (you can always make it more manageable by using LESS or SCSS, a kind of CSS generator source code). Here I'm introducing a solution using pure CSS. The point here is just simple, when it comes to repeating animation, you should think of CSS animation right away. Because of the sequential fading (in/out for only one element at a time), you can think of the animation-delay . Just set different values for each element, you will have the desired effect. Also note that, the animation-duration should be the total time of all cycles (of fading in and out all elements). You want a fading in of 8 seconds, I suppose the fading out takes 2 seconds. So the total time of 1 cycle is 10 seconds, the total cycles will be 80 seconds (for 8 elements).

Here is the detailed code:

 .bubble { height: 100px; width: 100px; position:absolute; animation: fading 80s infinite ease-in; opacity:0; } .bubble:nth-child(1) { background: #ff0; top:20%; left:10%; } .bubble:nth-child(2) { background: #333; top:20%; left:30%; animation-delay: 10s; } .bubble:nth-child(3) { background: #f90; top:20%; left:60%; animation-delay: 20s; } .bubble:nth-child(4) { background: #e43; top:20%; left:80%; animation-delay: 30s; } .bubble:nth-child(5) { background: #e38; top:70%; left:10%; animation-delay: 40s; } .bubble:nth-child(6) { background: #338;top:70%; left:30%; animation-delay: 50s; } .bubble:nth-child(7) { background: #fdd; top:70%; left:60%; animation-delay: 60s; } .bubble:nth-child(8) { background: #53d;top:70%; left:80%; animation-delay: 70s; } @keyframes fading { 0% { opacity:0; } 10% { opacity:1; } 12.5% { opacity:0; } } 

 <div class="bubble">&nbsp;</div> <div class="bubble">&nbsp;</div> <div class="bubble">&nbsp;</div> <div class="bubble">&nbsp;</div> <div class="bubble">&nbsp;</div> <div class="bubble">&nbsp;</div> <div class="bubble">&nbsp;</div> <div class="bubble">&nbsp;</div> 

Answer 2

You can use a recursive function, as such

var elems = $(".bubble");
var i = 1;
fade(elems[0])

function fade(elem) {
    if (i > elems.length - 1) {
    i = 0;
 }
 $(elem).fadeIn(300).delay(8000).fadeOut(300, function() {
     fade(elems[i++])
  });
 }

Answer 3

Try the following code

 var el = $( "[class^=bubble]"), i = 0; (function pulsate() { el.fadeOut(300).eq(i++%el.length).fadeIn(8000, pulsate); }()); 

 .bubble1 { background: #ff0; position:Absolute; top:20%; left:10%; height: 100px; width: 100px; } .bubble2 { background: #333; position:Absolute; top:20%; left:30%; height: 100px; width: 100px; } .bubble3 { background: #f90; position:Absolute; top:20%; left:60%; height: 100px; width: 100px; } .bubble4 { background: #e43; position:Absolute; top:20%; left:80%; height: 100px; width: 100px; } .bubble5 { background: #e38; position:Absolute; top:70%; left:10%; height: 100px; width: 100px; } .bubble6 { background: #338; position:Absolute; top:70%; left:30%; height: 100px; width: 100px; } .bubble7 { background: #fdd; position:Absolute; top:70%; left:60%; height: 100px; width: 100px; } .bubble8 { background: #53d; position:Absolute; top:70%; left:80%; height: 100px; width: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bubble1">&nbsp;</div> <div class="bubble2">&nbsp;</div> <div class="bubble3">&nbsp;</div> <div class="bubble4">&nbsp;</div> <div class="bubble5">&nbsp;</div> <div class="bubble6">&nbsp;</div> <div class="bubble7">&nbsp;</div> <div class="bubble8">&nbsp;</div> 

Here is the working jsfiddle: http://jsfiddle.net/f6C79/74/