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

Posted 2023-03-06

【中文标题】使用jQuery连续淡入/淡出多个图像

【英文标题】：Fade-in/Fade-out Multiple Images in Succession with jQuery

【发布时间】：2017-09-24 14:30:14

【问题描述】：

我是使用 JQuery 制作动画的新手，在尝试创建 以下动画时完全迷失了方向：

我希望一次 一个 CUBEFADE IN 持续 8 秒左右，然后 然后 FADE OUT 作为第二个立方体 FADES IN 这必须 一遍又一遍地继续所有 8 个立方体。 注意：一次只能看到一个立方体。

我在 jQuery 中没有做到这一点，但您可以查看我的小提琴，看看您是否可以按照上述说明更正我的代码，甚至可以简化 JQuery。如果您发现它是一个更好的解决方案，我也对 CSS3 Animation 持开放态度。谢谢您的帮助！

My Fiddle

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

【参考方案1】：

试试下面的代码

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>

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

【参考方案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++])
  );
 

【参考方案3】：

使用脚本可以使您的代码易于管理，但纯 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>

【讨论】：

您的 CSS 解决方案非常棒！最后一件事我怎样才能让它们更快地消失？我希望它像淡出一样淡入 2 秒，然后在淡出之前保持 5 到 6 秒的持续时间。