Javascript Jquery淡入/淡出

在这个项目上我需要帮助。

该菜单具有jquery功能，允许在将鼠标移到菜单上时显示图片。我需要照片淡入淡出，而不是像现在这样。更像是滑块。代码如下：

<script>
    var sourceSwapOut = function () {
        $("#slider").css('backgroundImage','url(image/Image-standard.png)');
    }
    var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.attr('data-id');

        $("#slider").css('backgroundImage','url(' + newSource +')');
    }

    $(function () {
        $('li.imageHandler').hover(sourceSwap, sourceSwapOut);
    });
</script>

<nav id="menu">
    <div id='cssmenu'>
        <ul>
            <li class="img1">
                <a href='#'><span>Lejlighed og værelser</span></a>
                <ul>
                    <li class="imageHandler" data-id="image/retro.png">
                        <a href='retro.html'><span>Retro</span></a>
                    </li>
                    <li class="imageHandler" data-id="image/udsigtenslider.png">
                        <a href='hyggen.html'><span>Hyggen</span></a>
                    </li>
                    <li class="imageHandler" data-id="image/Hemsen.png">
                        <a href='hemsen.html'><span>Hemsen</span></a>
                    </li>
                    <li class="imageHandler" data-id="image/udsigtenslider.png">    
                        <a href='udsigten.html'><span>Udsigten</span></a>
                    </li>
                    <li class="imageHandler" data-id="#">
                        <a href='rooms.html'><span>Værelserne</span></a>
                    </li>
                </ul>
            </li>
            <li class="imageHandler" data-id="image/Kvalitet-og-miljoe.png">
                <a href='kvalitetogmiljoe.html'><span>Kvalitet og Miljø</span></a>
            </li>
            <li class="imageHandler" data-id="image/image-aktiviteter.png">        
                <a href='aktiviteter.html'><span>Aktiviteter og arragementer</span></a>
            </li>
            <li class="imageHandler" data-id="image/Priser-og-Booking.png">
                <a href='booking-og-priser.html'><span>Priser og booking</span></a>
            </li>
            <li class="imageHandler" data-id="image/gaestebog.png">
                <a href='gaestebog.html'><span>Gæstebog</span></a>
            </li>
            <li class="imageHandler" data-id="image/Kontakt-os.png">
                <a href='kontakt.html'><span>Kontakt</span></a>
            </li>
        </ul>
    </div>
</nav>

var sourceSwapOut=函数（）{
$（“#slider”）.css（'backgroundImage'，'url（image/image standard.png）'）；
}
var sourceSwap=函数（）{
var$this=$（this）；
var newSource=$this.attr（'data-id'）；
$（“#slider”）.css（'backgroundImage'，'url（'+newSource+'））；
}
$（函数（）{
$（'li.imageHandler'）.hover（sourceSwap，sourceSwapOut）；
});

---

希望在这里找到帮助。

我建议您使用css3

.image{ 
    opacity: 0; 
    transition: opacity 0.5s;
}
.image.Hovered{
    opacity: 1;
}

$('elem').on('mousein', function(){  $(this).addClass('Hovered'); }
$('elem').on('mouseout', function(){ $(this).removeClass('Hovered'); }

---

我为此使用动画方法，请尝试以下代码：

var sourceSwapOut = function () {
    $('#slider').stop().animate({'opacity': 0}, 500, function(){
        $("#slider").css('backgroundImage','url(image/Image-standard.png)').stop().animate({'opacity': 1}, 500);
    });
}

var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.attr('data-id');
    $('#slider').stop().animate({'opacity': 0}, 500, function(){
        $("#slider").css('backgroundImage','url(' + newSource +')').stop().animate({'opacity': 1}, 500);
    });

}

---

好吧，用和滑块相同的方法实现它

您还可以使用

#标题

作为默认背景。使用CSS将

#滑块的不透明度设置为0（您可能应该将徽标向上移动一个级别，使其保持可见）。当用户将鼠标悬停在链接上时，只需设置背景并在
#滑块中淡入，然后在用户停止悬停时将其淡出即可

有很多方法可以实现这一点。需要注意的关键是，您需要多个元素，这样您就可以控制它们的不透明度，使它们淡入淡出。
您好，很抱歉回复太晚，但是我尝试了这里添加的所有解决方案，我没有成功地将其添加到代码中，仍然无法按预期工作。也许我做错了。我确实在CSS中添加了.image，在脚本中添加了jq？