jquery循環動畫淡入

我想加載三個圖像，每個都有一個動畫淡入淡出延遲，我想要淡入淡出所有，與他們各自的延遲，然後隱藏。然後再次淡入然後重複。動畫流示例： 1淡入此搜索延遲= 0 /圖像2延遲= 0.5秒/圖像3延遲= 1 /秒 2.隱藏上2S 這裏是我做了1.5s的 3.重複淡入所有三個圖像，我正在玩setInterval中的add和remove類。jquery循環動畫淡入

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

來源

2017-10-17 Drailan John Terrible

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

來源

2017-10-17 09:56:06

謝謝！這是我想到的想法，我已經嘗試過，但我的代碼並不那麼幹淨。多謝兄弟！ –

我建議你實現一個簡單的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/

來源

2017-10-17 09:43:42 Pascut

先生感謝你回答，但是這是我想要達到的輸出。 –

jquery循環動畫淡入

回答

相關問題