如何不重复这个jQuery代码？怎样才能淡入淡出呢？

如何更好地编写此代码？没有重复完全相同的行。 另外，在何处添加fadeIn（）和FadeOut（）部分。我希望背景图像在悬停在菜单项上时慢慢淡入淡出

<ul>
    <li class="menu-item-1">Item 1</li>
    <li class="menu-item-2">Item 2</li>
    <li class="menu-item-3">Item 3</li>
</ul>

jQuery(function(){
    var $body = $('body');
    $('li:first-child').hover(function(){
        $body.css('background-image', 'url("img/a.jpg")');
    }, function() {
        $body.css('background-image', '');
    });

$('li:nth-child(2)').hover(function(){
    $body.css('background-image', 'url("img/b.jpg")');
}, function() {
    $body.css('background-image', '');
});

$('li:nth-child(3)').hover(function(){
    $body.css('background-image', 'url("img/c.jpg)');
}, function() {
    $body.css('background-image', '');
});
})

第1项
第2项
第3项

jQuery（函数（）{
变量$body=$（'body'）；
$（'li:first child'）。悬停（函数（）{
$body.css（'background-image'，'url（“img/a.jpg”））；
}，函数（）{
$body.css（'background-image'，''）；
});
$（'li:n个子（2）'）。悬停（函数（）{
$body.css（'background-image'，'url（“img/b.jpg”））；
}，函数（）{
$body.css（'background-image'，''）；
});
$（'li:n子项（3）'）。悬停（函数（）{
$body.css（'background-image'，'url（“img/c.jpg”）；
}，函数（）{
$body.css（'background-image'，''）；
});
})

我相信这将是最优雅的方式：

$（函数（）{
变量$body=$（'body'）；
$（'ul.menu li'）。悬停（函数（）{
$body.css（'background-image'，'url（+$（this.data（'bg-image'）+'））；
}，函数（）{
$body.css（'background-image'，''）；
});
})

项目1
项目2
项目3

我相信这将是最优雅的方式：

$（函数（）{
变量$body=$（'body'）；
$（'ul.menu li'）。悬停（函数（）{
$body.css（'background-image'，'url（+$（this.data（'bg-image'）+'））；
}，函数（）{
$body.css（'background-image'，''）；
});
})

项目1
项目2
项目3

很遗憾，我无法在HTML中使用数据bg图像。菜单来自wordpress API@Dekel@monss，添加了一个没有

data-*

attributePerfect的示例！非常感谢！我现在最关心的是，在哪里添加.fadeIn（）和.fadeOut（）？？@DekelYou是受欢迎的：）至于fadeIn/fadeOut-不幸的是，背景图像不可能褪色（不使用css也不使用jQuery）。解决方法是将背景图像设置为某个元素，然后您可以淡入该元素。不幸的是，我无法在HTML中使用数据bg图像。菜单来自wordpress API@Dekel@monss，添加了一个没有

data-*

attributePerfect的示例！非常感谢！我最后关心的是，在哪里添加.fadeIn（）和.fadeOut（）？？@DekelYou是受欢迎的：）至于fadeIn/fadeOut-不幸的是，背景图像不可能褪色（不使用css也不使用jQuery）。解决方案是将背景图像设置为某个元素，然后可以褪色该元素。