Jquery Loop Animation fadeIn

Question

Ich versuche, drei Bilder zu laden, jede hat eine Animation fadeIn Verzögerung, Was ich will, ist sie alle verblassen, mit ihren jeweiligen Verzögerungen dann ausblenden. dann fadeIn wieder und dann wiederholen. Animationsfluss Beispiel: 1. FadeIn image1 Verzögerung = 0 s/image2 Verzögerung = 0,5s/image3 Verzögerung = 1/s 2. ausblenden alle drei Bilder auf 1,5s 3. Wiederholen Sie auf 2s FadeIn Hier ist, was ich getan habe, Ich spiele mit add und entferne Klasse 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>

Answer 1

Sie können es nur mit CSS-Animation tun:

#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

Ich schlage vor, Sie einen einfachen Javascript-Code ohne Fremd Anforderungen umzusetzen. Erstellen Sie eine Funktion und verwenden Sie sie als fadeOut-Callback, die Funktion wird aufgerufen, wenn ein Element ausgeblendet wird.

Sie sollten so etwas wie dies versuchen:

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

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