定時過濾器transistion動畫

Question

即時通訊工作在這個項目中，我連續三張海報（圖片）。

我想知道是否有可能定時動畫設置爲循環每個海報。

爲所有，但第一張海報都greyscaled，2秒，然後所有，但中間greyscaled 2秒，然後在前兩個greyscaled 2秒。

我希望有些是有道理的。

感謝

Answer 1

您可以使用setInterval(function, time);讓重複的JavaScript函數下去。或者，您可以使用setTimeout，它只會執行一次，但可以在函數中再次調用。 （有用的，如果你想要一些停止條件）

在該函數的所有您需要做的則是通過所有的圖像週期。我是用數組做的，但是你也應該可以使用$('img')，它選擇所有圖像，然後用<any jQuery element>.get()來訪問這些元素。

然後使用removeClass和addClass來添加和刪除一個CSS類，它描述了您想要的效果。

詮釋你到底應該something like this

（從這裏codepen :)

var images = [$('#img1'), $('#img2'), $('#img3')]; 
 
var currImage = 0; 
 

 
function cycle() { 
 
    images[currImage].removeClass('highlighted'); 
 
    ++currImage; 
 
    if(currImage >= images.length) 
 
    currImage = 0; 
 
    images[currImage].addClass('highlighted'); 
 
} 
 

 
setInterval(cycle, 2000);

img.highlighted { 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <img src="http://www.placecage.com/100/100" alt="" id="img1" class="highlighted"> 
 
    <img src="http://www.placecage.com/100/100" alt="" id="img2"> 
 
    <img src="http://www.placecage.com/100/100" alt="" id="img3"> 
 
</div>

---

相同的代碼最終如果你也想動畫，可以要麼用jQuery來做，要麼沿着

img { 
    transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
} 

，如果你想要的東西票友有很多關於CSS過渡頁面。