在悬停时更改背景图像时保持浏览器不闪烁

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 所做的每一项测试都没有成功。

Answer 1

你可以在图像事务中添加动画，试试

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

});