Javascript 悬停时背景图像淡入

我让jquery在文本上悬停时更改背景图像。我想添加淡入效果

以下是我现在掌握的代码：

$(document).ready(function(){
    $("#anatomyNow").hover(function(){
        $("#bg").css("background-image",    "url(image/anatomyNow5.png)");
        }, function(){
        $("#bg").css("background-image",    "url(image/anatomyNow5.png)");
        });
});

我试图添加下面的代码，但它不起作用

$(document).ready(function(){
    $("#anatomyNow").hover(function(){
        $("#bg").fadeIn();
    });
});

更新： 谢谢大家的回答

我想要的效果是这样的：

---

将鼠标悬停在文本上时，背景图像将更改。我已经设法做到了，但是图像变化太快了。我希望添加效果，使图像不会发生显著变化。

fadeIn

为元素的不透明度设置动画，因此在此上下文中使用它将不起作用

在这里，可能有不止一种方法可以实现您想要的效果，但是想到的一种方法是将图像/div与背景图像层叠在一起，并在悬停时使用css不透明度转换

我为你做了一点谷歌搜索，这里有一个资源展示了如何做到这一点：

---

如果我没有误解您的要求，那么这就是您想要的

$（文档）.ready（函数（）{
$（“#效果”）.hover（函数（）{
$（此）。设置动画({
不透明度：“1”
}“慢”）；
}，函数（）{
$（此）。设置动画({
不透明度：“0.5”
}“慢”）；
});
});
#效果{
填充：0.4em；
背景：#555 url（“https://thumb9.shutterstock.com/display_pic_with_logo/77318/1007648908/stock-photo-sunrise-beam-in-the-beautiful-park-1007648908.jpg");
不透明度：0.5；
}
#影响{
最大宽度：490px；
高度：320px；
}

也许它只是褪色太快了。尝试将fadeIn（）更改为fadeIn（3000）我试过了，它不起作用fadeIn动画
不透明度
不是背景图像，所以它可能不起作用：）你可能在找这样的东西：？