Question

在搜索我的问题的解决方案时，我找到了用户Arun P Johny关于如何改变背景效果的答案

jQuery(function(){
    var $body = $('body');
    $('.menu-item-1').hover(function(){
        $body.css('background-image', 'url("yadayadayada.jpg")')
    }, function() {
        $body.css('background-image', '')
    })
})

但如何顺利改变？

Answer 1

根据您的设置方式，您可以执行类似

的操作

$('.myimage').on('mouseover', function(){
$('.backgroundimage').fadeOut("slow",     function(){ 
complete : function () {
$('.otherimage').fadeIn();
}
});
});

我在手机上并没有尝试过这段代码，只是为了给你一个想法。

Answer 2

据我所知，如果没有广泛（和慢速）的javascripting，你无法在一个单独的元素上完成，你可以在每个像素上设置图像源的动画。对我来说似乎不好。

相反，将另一个元素添加到DOM并为其设置动画，您可以使用CSS过渡来完成。简单快捷。

这是重要的CSS部分：

body {
    background: url(image1.jpg);
}
div {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(image2.jpg);
    transition: all 0.5s linear;
}
div:hover {
    opacity: 0;
}

这是一个有效的fiddle。

OP OPMENT后编辑：

从CSS中删除:hover选择器，然后像这样修改你的JS：

jQuery(function(){
    var $div = $('div');
    $('.menu-item-1').hover(function(){
        $div.css({opactiy: 0})
    }, function() {
        $div.css({opacity: 1})
    })
})

悬停在元素上时平滑地改变背景

2 个答案: