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

Question

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

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

谢谢，

尼克

Answer 1

如果没有一些说明或一些示例代码，很难说出您想要做什么，但是您是否在寻找 的东西像这样？

$("#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 元素。如果是这种情况，请查看此示例。真正改变的只是用 css 替换 jQuery attr 函数。

Answer 2

使用以下代码：

<div id="someElement" style="background:url('2.jpg');width:100px;height:100px;">
</div>
     $(document).ready(function(){ 
        $("#someElement").hover(function() {
            $(this).stop().fadeOut("1000", function() {
                $(this).css("background", "url('1.jpg')").fadeIn(1000);
            });
        }, function() {
            $(this).stop().fadeOut("1000", function() {
                $(this).css("background", "url('2.jpg')").fadeIn(1000);
            });
        });
    });

Answer 3

HTML

这是在其背景中包含图像的 HTML 元素：

<div class="image"></div>

CSS

我们定义了两个 CSS 类。包含 image1.jpg 的元素的默认类和包含 image2.jpg 的第二个类：

.image {
    width: 1000px; /* Image width */
    height: 500px; /* Image height */
    background: url('../images/image1.jpg') no-repeat; /* First image */
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "../images/image1.jpg", sizingMethod = 'scale');
    background-size: 100% 100%;
    background-position: center;
}
.image.image-2 {
    background: url('../images/image2.jpg') no-repeat;  /* Second image */
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "../images/image2.jpg", sizingMethod = 'scale');
    background-size: 100% 100%;
    background-position: center;
}

JavaScript

JavaScript 使用回调/承诺来确保每个转换都按正确的顺序发生：

var elem = $('.image'); // Define the element
elem.hover(toggleImage); // When hovering over the element, run the toggleImage function

function toggleImage() {
    // Fade out 0.5 secs, toggle image class, fade in 0.5 secs
    elem.fadeOut(500, function(){
        elem.toggleClass('image-2').promise().done(function(){
            elem.fadeIn(500);
        });
    })
}