jquery - 在悬停时向背景图像添加淡入淡出过渡

Question

我在页面的侧边栏中有一个简单的导航系统，您可以看到 here .

如您所见，当您将鼠标悬停在侧边栏中的一个链接上时，背景图像会发生变化，因为我在 CSS 中为悬停设置了不同的背景 URL。我正在寻找一种添加过渡效果的简单方法，以便悬停背景图像淡入和淡出。我尝试了几种 jQuery 方法但没有成功。我想知道是否有一种使用 jQuery 或其他方法向背景 URL 图像添加淡入淡出过渡的方法，或者我是否必须使用不同的方法来获得过渡效果。

谢谢，

尼克

Answer 1

如果没有一些说明或一些示例代码，很难说出您要做什么，但是您在寻找 something like this 吗？ ？

$("#someElement").hover(function() {
    $(this).stop().fadeOut("1000", function() {
       $(this).attr("src", "anotherImage.png").fadeIn(1000);
    }); 
}, function() {
    $(this).stop().fadeOut("1000", function() {
       $(this).attr("src", "firstImage.png").fadeIn(1000);
    }); 
});

在这个例子中，#someElement 指的是一个 img 元素。 src 属性在悬停时发生变化，具有淡入淡出的效果。

编辑 - 重新阅读您的问题后，我认为您想更改 background-image CSS 属性，而不是 src img 元素。如果是这样，请查看 this example .真正改变的是将 jQuery attr 函数替换为 css。