点击实现背景图片的淡入淡出切换(JQ)

[LuoooJunnn]

  .bg_image{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-image: url(../images/p1.jpeg);
	background-size: cover;
	/*background-attachment:fixed;*/
	z-index: -99;
}

CSS是这样的，我在全屏div上添加了background-image，现在我想实现，点击一个按钮，这个background-img实现淡出效果，然后淡入下一张图片，比如淡入background-image: url(../images/p2.jpeg);请问大神这怎么实现

[Z_gainloss]

用jq直接改变background的值

[daswcszxw]

$('.bg_image').animate({opacity: '0'},1000);
//直接background-image是不行的，根据这个试试其他办法。

[大刘鸭]

背景图片可以放多张，背景图片也可以定位，点击的时候写的动画，让图片的位置移动就行了，，，，，，但是这不是轮播图吗，还不如直接写个轮播图

[天际的海浪]

$("#id").fadeOut(300,function(){$(this).css("backgroundImage","url(../images/p2.jpeg)")}).fadeIn(300);

[LuoooJunnn]

引用 4 楼 jslang 的回复:

$("#id").fadeOut(300,function(){$(this).css("backgroundImage","url(../images/p2.jpeg)")}).fadeIn(300);

大神，但是这里出现了问题，我的代码是这样的

$(function(){
 	var array = [];
	 for( let i = 1; i <=20; i++ ){
		array[i] = i
	} 
	var images = Math.floor(Math.random()*20+1);
	var str = 'url(../images/p'+images+'.jpg)';		//获取随机图片，以便于下次淡入
	$('#change_bgimage').click( function(){
			$('.bg_image').fadeOut(2000,function(){
				$(this).css( 'backgroundImage',str );
			}).fadeIn(2000); 

	})
})

[LuoooJunnn]

引用 4 楼 jslang 的回复:

$("#id").fadeOut(300,function(){$(this).css("backgroundImage","url(../images/p2.jpeg)")}).fadeIn(300);

谷歌提示 jquery.min.js:3 GET file:///E:/meirilianxi/images/p13.jpg net::ERR_FILE_NOT_FOUND，我用控制台输出str的时候，发现输出的是url(../images/p4.jpg),也就是正确的地址，为啥会淡入时候出现问题呢

[LuoooJunnn]

引用 2 楼 webyellow 的回复:

$('.bg_image').animate({opacity: '0'},1000);
//直接background-image是不行的，根据这个试试其他办法。

我打算用.css()改变背景的backgroundImage的url值实现下张照片的准备...