Jquery 打开带有过渡的背景

我正在开发一个有点Jquery的网站，但是。。。 我找到了一些东西来显示div悬停时的身体背景。它工作得很好。但它没有任何动画。我想要一点淡入淡出的动画，以免吓跑游客。我试过Fadein和animate，但没用

这是工作完美的代码我真的不知道如何添加这个基本的“显示”转换。

$(document).ready(function() {

//Preload
$('<img/>').hide().attr('src', 'http://4.bp.blogspot.com/-3YtwFdb01YI/TnCNSc1c93I/AAAAAAAAA5c/V6g_3ghlw30/s1600/Background+13.jpg').load(function(){
    $('body').append($(this));
});

$('#fb').hover(function() {
    $('body').css('background-image', 'url("http://4.bp.blogspot.com/-3YtwFdb01YI/TnCNSc1c93I/AAAAAAAAA5c/V6g_3ghlw30/s1600/Background+13.jpg")');
}, function() {
    $('body').css('background', '');
});

$（文档）.ready（函数（）{
//预载
$('
}))

这将有助于理解：
谢谢你的帮助，对不起我的英语

红豆，看看这把小提琴

JS:

HTML:

它有点像你想要的，除了背景图像被附加到一个div而不是body

编辑：这里还有一个（）根本不会更改您的javascript文件，我只是简单地添加了以下css：

body {

background-image: url("http://rs664.pbsrc.com/albums/vv4/TSAnanth/Blank%20Page/B9EAE5A5.jpg~c200");
 background-size: cover;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;

} 

css中给出的背景图像只是一个空白图像。
请查看此小提琴

JS:

HTML:

它有点像你想要的，除了背景图像被附加到一个div而不是body

编辑：这里还有一个（）根本不会更改您的javascript文件，我只是简单地添加了以下css：

body {

background-image: url("http://rs664.pbsrc.com/albums/vv4/TSAnanth/Blank%20Page/B9EAE5A5.jpg~c200");
 background-size: cover;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;

} 

css中给出的背景图像只是一张空白图像。
您好，所以我在它上做了一个
幻灯片切换，但效果不如我想象的那样好

但这是联系

我不认为你可以在幻灯片切换中比“slow”慢，但它对段落文本和其他内容有好处

我确实认为fadeIn（你说你试过了？）更有效——也许你只是没有把它放慢足够的速度。我的设置为1000ms（1秒），但你可以进一步放慢速度


希望这有帮助

雷切尔

p、 s.BonneNuit

顺便说一句，这是一个相当暗的图像；如果你想淡出一点，你可以应用一个过滤器来降低不透明度，就像这里的小提琴一样

这是淡入片段


$（“#tog”）.hover（函数（e）{
美元（“#fb”）.fadeIn（“1000”）；
});
/*滑动开关
$（“#tog”）.悬停（函数（e）{
$（“#fb”）。滑动切换（“慢速”）；
});
*/
h1{
颜色：黑色；
}
#食品饮料{
背景：url（'http://4.bp.blogspot.com/-3YtwFdb01YI/TnCNSc1c93I/AAAAAAAAA5c/V6g_3ghlw30/s1600/Background+13.jpg'）重复；
背景重复：重复！重要；
最小高度：800px；
宽度：自动；
显示：无；
}

在这里盘旋
嗨，所以我在它上面做了一个
滑动切换
，但效果不如我想象的那么好

但这是联系

我不认为你可以在幻灯片切换中比“slow”慢，但它对段落文本和其他内容有好处

我确实认为fadeIn（你说你试过了？）更有效——也许你只是没有把它放慢足够的速度。我的设置为1000ms（1秒），但你可以进一步放慢速度


希望这有帮助

雷切尔

p、 s.BonneNuit

顺便说一句，这是一个相当暗的图像；如果你想淡出一点，你可以应用一个过滤器来降低不透明度，就像这里的小提琴一样

这是淡入片段


$（“#tog”）.hover（函数（e）{
美元（“#fb”）.fadeIn（“1000”）；
});
/*滑动开关
$（“#tog”）.悬停（函数（e）{
$（“#fb”）。滑动切换（“慢速”）；
});
*/
h1{
颜色：黑色；
}
#食品饮料{
背景：url（'http://4.bp.blogspot.com/-3YtwFdb01YI/TnCNSc1c93I/AAAAAAAAA5c/V6g_3ghlw30/s1600/Background+13.jpg'）重复；
背景重复：重复！重要；
最小高度：800px；
宽度：自动；
显示：无；
}

在这里盘旋
一些html配合使用可能会有所帮助。但我认为你需要的是一个滑动切换效果检查：谢谢你的帮助！只是过渡效果对访问者的眼睛来说不那么残酷。没问题，在爱尔兰是晚上9点以后，你的时间是什么时候？只是有时时间差会导致与用户的通信延迟。我会告诉你现在看一看法国的晚上10点。哦，好的！好的，谢谢：-）我是康奈斯！如果你能和它一起使用，那会很有帮助。。但我想你要找的是一个滑动切换效果检查：谢谢你帮助我！只是过渡效应对游客的眼睛来说不那么残酷。没问题，在爱尔兰，晚上9点以后，你的时间是几点？有时时间差会导致与用户的通信延迟。我现在去法国看一看，晚上10点。哦，好的！好的，谢谢：-）我懂了！在法国南部，小提琴143就是解决办法-D非常感谢！小提琴就是解决办法-D非常感谢！非常感谢瑞秋！非常感谢瑞秋！
body {
background-repeat: repeat;
}

#fb {
top: 0;
position: absolute;
}

.wrapper {
display: none;
width: 500px;
height: 500px;
background-image: url("http://4.bp.blogspot.com/-3YtwFdb01YI/TnCNSc1c93I/AAAAAAAAA5c/V6g_3ghlw30/s1600/Background+13.jpg");
}

body {

background-image: url("http://rs664.pbsrc.com/albums/vv4/TSAnanth/Blank%20Page/B9EAE5A5.jpg~c200");
 background-size: cover;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;

}