Jquery循环动画淡入

Jquery Loop Animation fadeIn

我正在尝试加载三张图片,每张图片都有一个动画淡入延迟,我想要的是将它们全部淡入,然后隐藏它们各自的延迟。然后再次淡入然后重复。 动画流程示例: 1. FadeIn image1 delay=0s /image2 delay=0.5s /image3 delay=1 /s 2. 在 1.5s 上隐藏所有三个图像 3. 在 2s 上重复 FadeIn 这是我所做的,我正在 setInterval.

中添加和删除 class

$(".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>

我建议您实现一个没有第三方要求的简单 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/

您可以只使用 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>