jquery循环动画淡入

Question

我想加载三个图像，每个都有一个动画淡入淡出延迟，我想要淡入淡出所有，与他们各自的延迟，然后隐藏。然后再次淡入然后重复。 动画流示例： 1淡入此搜索延迟= 0 /图像2延迟= 0.5秒/图像3延迟= 1 /秒 2.隐藏上2S 这里是我做了1.5s的 3.重复淡入所有三个图像，我正在玩setInterval中的add和remove类。

$(".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）投票代码

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代码

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