jQueryで簡単なフェード効果やスローアニメーションのオンマウスオーバーを行う方法

Question

トピックに似ています。私のコードは次のようになります。

$('li a').mouseover(function() { 
    var rhomboidImg = $(this).data('rhomboid-img'); 
    $('#img-nav-rhomboid').css('background', 'url(' + rhomboidImg + ') no-repeat '); 
    $('#img-nav-rhomboid img').delay(2000).fadeIn(); 
}); 

そしてここにhtmlです：

<nav class="menu-closed"> 
      <div id="img-nav-rhomboid" class="nav-rhomboid"></div> 
      <ul class="menu-list"> 
       <li class="menu-accent-border"><img src="img/menu-mrowka.jpg" alt="Materiały Budowlane"/><li> 
       <li><a href="mrowka.html" data-rhomboid-img="img/nav1.jpg">Mrówka Wszystko dla domu</a></li> 
       <li><a href="instal-metal.html" data-rhomboid-img="img/nav2.jpg">Sklep instalacyjno-metalowy</a></li> 
       <li class="menu-accent-border2"><img src="img/menu-psb.jpg" alt="Materiały Budowlane"/><li> 
       <li><a href="bud-opalenica.html" data-rhomboid-img="img/nav3.jpg">Magazyn materiałów budowlanych Opalenica</a></li> 
       <li><a href="bud-nowytomysl.html" data-rhomboid-img="img/nav4.jpg">Magazyn materiałów budowlanych Nowy Tomyśl</a></li> 
       <li><a href="#" data-rhomboid-img="img/nav5.jpg">Magazyn materiałów budowlanych Grodzisk Wlkp.</a></li> 
       <li class="menu-accent-border3"><a href="" data-rhomboid-img="img/nav6.jpg">Centrum ogrodnicze OPALFLORA</a></li> 
       <li><a href="" data-rhomboid-img="img/nav7.jpg">Betoniarnia</a></li> 
       <li><a href="" data-rhomboid-img="img/nav8.jpg">Uścięcice</a></li> 
      </ul> 
     </nav> 

私はli要素の上に置くと、それはいくつかのアニメーションで、画像を変更する必要があります。

Answer 1

あなたは、CSSをタグ付けするので、私はあなたに、このために働くいくつかのCSSコードを与えるつもりです：

@keyframes fadeIn { 
0% { 
    opacity: 0 
} 
to { 
    opacity: 1 
} 
} 
.fadeIn { 
    animation-name: fadeIn 
} 

上記これはhttps://github.com/daneden/animate.css

.rhomboid-img { 
    -webkit-transition-delay: 2s; 
    transition-delay: 2s; 

の礼儀である以上これはフェードを遅らせますあなたの望む2000秒または2秒間、 .fadeInクラスと.rhomboid-imgクラスの両方を使用するようにしてください。

Answer 2

あなただけフェードインアニメーションホバー上のあなたにもCSS

.rhomboid-img{ 
    opacity: 0; 
} 

.rhomboid-img:hover{ 
    opacity: 1; 
    transition: 2s all ease-in-out; 
}