Question

我刚接触JQuery动画，我完全失去了尝试创建以下动画：

我希望 ONE CUBE 一次 FADE IN 8秒左右然后 FADE OUT 作为第二个立方体 FADES IN ，这必须继续为所有8个CUBES一遍又一遍。 注意：一次只能看到一个多维数据集。

我在jQuery中没有这样做，但你可以查看我的小提琴，看看你是否可以更正我的代码以遵循上述说明，甚至可以简化JQuery。如果你发现它是一个更好的解决方案，我也会对CSS3动画开放。谢谢您的帮助！

这是 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

使用脚本可以使您的代码易于管理，但纯CSS解决方案仍然有其自身的优势（通过使用LESS或SCSS，一种CSS生成器源代码，您总是可以使其更易于管理）。在这里，我将介绍使用纯CSS的解决方案。这里的要点很简单，在重复动画时，你应该立刻想到CSS animation。由于顺序淡入（一次仅输入/输出一个元素），您可以想到animation-delay。只需为每个元素设置不同的值，您将获得所需的效果。另请注意，animation-duration应该是所有周期的总时间（淡入和淡出所有元素）。你想要一个8秒的淡入淡出，我想淡出需要2秒。因此，1个周期的总时间为10秒，总周期为80秒（8个元素）。

以下是详细代码：

.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

您可以使用递归函数

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

尝试以下代码

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

这是工作的jsfiddle：http://jsfiddle.net/f6C79/74/

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

3 个答案: