在悬停时向背景图像添加淡入和淡出过渡 [英] Adding a fade in and out transition to background image on hover

问题描述

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

I have a simple navigation system in a sidebar on a page that you can see here.

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

As you can see when you hover over one of the links in the sidebar the background image changes as I have set a different background URL for hover in the CSS. I am looking for a simple way of adding a transition effect, so that the hover background image fades in and out. I have tried a couple of jQuery methods without success. I am wondering if there is a way of adding a fade transition using jQuery or some other method to the background URL image, or whether I have to use a different method to get a transition effect.

谢谢

尼克

推荐答案

在不做任何澄清或提供示例代码的情况下，很难说出您要做什么，但是您是否在寻找

It's difficult to say what you're trying to do without some clarification, or some example code, but are you looking for 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属性在悬停时更改，具有淡入淡出效果.

In this example, #someElement refers to an img element. The src attribute is changed on hover, with a fade effect.

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

Edit - having re-read your question, I think you want to change the background-image CSS property, rather than the src of an img element. If that's the case, have a look at this example. All that has really changed is replacing the jQuery attr function with css.

这篇关于在悬停时向背景图像添加淡入和淡出过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！