タイムドフィルタのトランジションアニメーション

Question

私は3つのポスター（画像）が並んでいるこのプロジェクトに取り組んでいます。

ループした各ポスターにタイムド・アニメーションを設定することが可能かどうかは疑問でした。

最初のポスターを除くすべてのものはグレースケールで2秒間、次に中間部を除くすべてが2秒間グレースケールされ、最初の2つは2秒間グレースケールされます。

多少意味があると思います。

おかげ

Answer 1

あなたはjavascriptが無期限に機能を繰り返させるsetInterval(function, time);を使用することができます。または、setTimeoutを使用することもできます。これは1回だけ実行されますが、関数自体から再度呼び出すことができます。 （何らかの停止条件が必要な場合に便利です）

この機能では、すべての画像を循環させるだけです。私は配列を使ってこれを行いましたが、すべての画像を選択して<any jQuery element>.get()を使用してそれらの要素にアクセスする$('img')も使用できるようにする必要があります。

次に、removeClassとaddClassを使用して、希望する効果を説明するCSSクラスを追加して削除します。あなたはまた、アニメーションをしたい場合は、エンドのInt

あなたはあなたができる、ここで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>

---

からsomething like this

（同じコードで終わる必要がありますjQueryを使用するか、または

の行に沿って何かを追加してください10

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

CSSのトランジションについては、何か面白いものが必要な場合は、たくさんのページがあります。