Question

我正在尝试加载三个图像，每个图像都有一个动画淡入延迟，我想要的是将它们全部淡入，然后隐藏各自的延迟。然后再次淡出然后重复。动画流程示例： 1. FadeIn image1 delay = 0s / image2 delay = 0.5s / image3 delay = 1 / s 2.在1.5秒上隐藏所有三个图像 3.在2s重复FadeIn 这就是我所做的，我正在使用setInterval中的添加和删除类。

$(".tri1").inViewport(function(px) {
    if (px > 0) {
      fadeAdd();

      setInterval(function() {
        fadeAdd();
      }, 5500);

      setInterval(function() {
        fadeRemove();
        $(".tri1").css('opacity', '0');
        $(".tri2").css('opacity', '0');
        $(".tri3").css('opacity', '0');

      }, 5400);
    }
  });

  function fadeAdd() {
    $(".tri1").addClass("fadeIn");
    $(".tri2").addClass("fadeIn");
    $(".tri3").addClass("fadeIn");
  }

  function fadeRemove() {
    $(".tri1").removeClass("fadeIn");
    $(".tri2").removeClass("fadeIn");
    $(".tri3").removeClass("fadeIn");
  }

.tri2{
  animation-delay: 0.5s;
}

.tri3{
  animation-delay: 1s;
}

<div class="pointer">
            <img class="tri1 animated" src="res/img/sec4/tri1.png" alt="" />
            <img class="tri2 animated" src="res/img/sec4/tri2.png" alt="" />
            <img class="tri3 animated" src="res/img/sec4/tri3.png" alt="" />

 </div>

Answer 1

您只能使用CSS动画：

#img-container img{
  border: 5px solid orange;
  height: 100px;
  width: 100px;
  animation-duration: 4s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}
#img-container img#pic1{
  animation-name: fadeIn1;
}
#img-container img#pic2{
  animation-name: fadeIn2;
}
#img-container img#pic3{
  animation-name: fadeIn3;
}

@keyframes fadeIn1{
  0%{ opacity: 0;}
  12.5%{ opacity: 1;}
  90%{ opacity: 1; }
  100%{ opacity: 0; }
}

@keyframes fadeIn2{
  0%{ opacity: 0;}
  12.5%{ opacity: 0;}
  25%{ opacity: 1;}
  90%{ opacity: 1; }
  100%{ opacity: 0; }
}

@keyframes fadeIn3{
  0%{ opacity: 0;}
  25%{ opacity: 0;}
  37.5%{ opacity: 1;}
  90%{ opacity: 1; }
  100%{ opacity: 0; }
}




.as-console-wrapper{display: none!important;}

<div id="img-container">
  <img id="pic1" src="http://lorempixel.com/100/100/people" alt="pic1" />
  <img id="pic2" src="http://lorempixel.com/100/100/nature" alt="pic2" />
  <img id="pic3" src="http://lorempixel.com/100/100/fashion" alt="pic3" />
</div>

Answer 2

我建议你实现一个没有第三方要求的简单javascript代码。创建一个函数并将其用作fadeOut的回调函数，当元素淡出时将调用该函数。

你应该尝试这样的事情：

1）Javascript代码

var $elem = $('#main .trip'), l = $elem.length, i = 0;

function go() {
    $elem.eq(i % l).fadeIn(700, function() {
        $elem.eq(i % l).fadeOut(700, go);
        i++;
    })
}

go();

2）HTML代码

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<div id="main">
    <div id="1" class="trip">Item1</div>
    <div id="2" class="trip">Item2</div>
    <div id="3" class="trip">Item3</div>
</div>

3）CSS代码

.trip { display: none}

演示：http://jsfiddle.net/MtmxN/

您可以使用其他jQuery版本，详情请参阅：https://code.jquery.com/

Jquery循环动画淡入淡出

2 个答案: