javascript - 在悬停时更改背景图像时防止浏览器闪烁

Question

正在寻找一种方法来在将鼠标悬停在特定元素上时在两个背景图像之间平滑过渡？我已经尝试了所有我能想到的方法。

背景图片样式为:

padding: 0
margin: 0
border: 0
background: #232930 url(../inc/alfaExt.jpg) 0 0 fixed
-webkit-background-size: cover
-moz-background-size: cover
-o-background-size: cover
background-size: cover
background-repeat: no-repeat
transition: background .3s

这是 Js:

$('.siteButton').hover(function(){
    $('body').css({'background': '#232930 url(../inc/' + this.id +   'Ext.jpg)'});
});

当我在元素之间快速切换时，浏览器一直闪烁白色。我已经删除了过渡并将图像预加载到浏览器缓存中，但没有成功。

我知道 sprite/position 解决方案，但我需要这些图像来完全填充 body 而不重复。我对 Sprite 所做的每项测试都没有成功。

Answer 1

可以在图片交易中加入动画，试试

$('.siteButton').hover(function(){
$('body').css({'background': '#232930 url(../inc/' + this.id +   'Ext.jpg)'}).fadeIn(200);

});