在一个页面的侧边栏中有一个简单的导航系统,你可以在这里看到。
正如你所看到的,当你将鼠标悬停在侧边栏中的一个链接上时,背景图像会发生变化,因为我在CSS中为悬停设置了不同的背景URL。我正在寻找一个简单的方式添加过渡效果,使悬停背景图像淡入淡出。我已经尝试了几个jQuery方法,但都没有成功。我想知道是否有一种使用jQuery或其他方法添加渐变过渡到背景URL图像的方法,或者我是否必须使用不同的方法来获得过渡效果。
谢谢,尼克
如果没有一些说明或一些示例代码,很难说您想要做什么,但是您正在寻找这样的东西吗?
$("#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属性,而不是img
元素的src
。如果是这样的话,看看这个例子。真正改变的是将jQuery的attr
函数替换为css
。
使用以下代码:
<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);
});
});
});
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);
});
})
}