フェードバックグラウンドトランジションとホバーオーバーエフェクト

Question

この5つのオプションブロックのランディングページで作業し、各ブロックにはそのカテゴリの画像があります。

目的は、最初のもの（m1）が読み込まれた状態でロードすることです。別のブロックにマウスを重ねると、ブロックdivは非常に速く2回点滅し、非常にデジタル的に点滅し、点滅します。願っているの？すべての部門はリンクですが、私がそれを最善の方法で行ったかどうかは分かりませんが、それはうまくいくようです！

さらに、背景がスワッピングしていますが、jQueryを使ってスワップされた背景間の遷移で少しスムーズになりたいと思います。

jQueryを正しく書いているかどうかわからないので、それについてのコメントも探しています。

ありがとうございます！ https://jsfiddle.net/da09ewLn/

<div class="cat_bg"> 
    <div id="m1" class="clickable"> 
    <a href="link.php"> </a>Option 1</div> 
    <div id="m2" class="clickable"> 
    <a href="link.php"> </a>Option 2</div> 
    <div id="m3" class="clickable"> 
    <a href="link.php"> </a>Option 3</div> 
    <div id="m4" class="clickable"> 
    <a href="link.php"> </a>Option 4</div> 
    <div id="m5" class="clickable"> 
    <a href="link.php"> </a>Option 5</div> 
</div> 

Answer 1

私はあなたのfiddleを更新し、jQueryとCSSのいくつかの数行を追加しました：ここにフィドルです。

jQuery経由でトランジションを行いたい場合は、 はちょうどこのようになりますあなたのjQueryであなたのjqueryので.css()ライン transition: all ease-in-out 0.3s; /*0.3s or no. of delays of your choice. */

.css()を追加します。

.css({'background-image': 'url(http://i.imgur.com/cyNC3xZ.jpg)', 'transition': 'all ease-in-out 0.3s'})

また、あなたがあれば、彼らはたくさん になりますため、私が代わりにCSSのトランジションを追加することをお勧めします他のブラウザでも動作するようにしてください。

-webkit-transition:all ease-in-out 0.3s; 
-moz-transition:all ease-in-out 0.3s; 
-o-transition: all ease-in-out 0.3s; 
transition: all ease-in-out 0.3s;