Jquery Loop Animation fadeIn

2
votes

I am trying to load three images, each has an animation fadeIn delay, What I want is to fade them all in, with their respective delays then hide. then fadeIn again then repeat. Animation flow Example: 1. FadeIn image1 delay=0s /image2 delay=0.5s /image3 delay=1 /s 2. Hide all three images on 1.5s 3. Repeat FadeIn on 2s Here's what I have done, I am playing with add and remove class in 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>
2
jquerycssfadein

2 Answers

2
votes

You can do it using CSS animation only:

#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>
1
votes

I suggest you to implement a simple javascript code with no third-party requirements. Create a function and use it as fadeOut's callback, the function will be called when an element is faded out.

You should try something like this:

1) Javascript code

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 code

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

.trip { display: none}

Demo: http://jsfiddle.net/MtmxN/

You can use a different jQuery version, details here: https://code.jquery.com/