如何与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>

当我徘徊在李元素上时，它应该更改图片，但要使用一些动画。

Answer 1

如果您只想在悬停的鼠标上创建淡入淡出的动画，则可能还想使用CSS

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

Answer 2

由于您标记了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或两秒钟的淡出。只需确保同时使用.fadein和.rhomboid-img类。