jQuery - 图像之间的过渡而不是突然的变化

Question

我通过像这样更改 src 来根据按钮单击显示和隐藏图像...

var images = ["https://dummyimage.com/300x300/000/fff&text=Image+1", "https://dummyimage.com/300x300/000/fff&text=Image+2", "https://dummyimage.com/300x300/000/fff&text=Image+3"];

$('.btn').click(function(){
		
		$('.btn').removeClass('active').addClass('inactive');
		$(this).removeClass('inactive').addClass('active');
	 
	 	if ( $('.btn1').hasClass('active') ) {
        $("#output").attr("src",images[0]);
		} else if ( $('.btn2').hasClass('active') ) {         
        $("#output").attr("src",images[1]);
		} else if ( $('.btn3').hasClass('active') ) {
        $("#output").attr("src",images[2]);
		}
	
});

.active{background:green;}
.inactive{background:grey;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn1 active">
  Button 1
</button>
<button class="btn btn2 inactive">
  Button 2
</button>
<button class="btn btn3 inactive">
  Button 3
</button>

<br>
<br>

<img id="output" src="https://dummyimage.com/300x300/000/fff&text=Image+1">

这是可行的，但我希望图像能够相互过渡，而不是突然改变

我知道我可以淡出然后进入，但有没有办法让一个淡入另一个？

Answer 1

您可以通过使用fadeIn()、fadeOut()函数来实现：

$("#output").fadeOut("slow");

if ( $('.btn1').hasClass('active') ) {
   $("#output").attr("src",images[0]);
} else if ( $('.btn2').hasClass('active') ) {         
   $("#output").attr("src",images[1]);
} else if ( $('.btn3').hasClass('active') ) {
   $("#output").attr("src",images[2]);
}
$("#output").fadeOut("slow");

Answer 2

根据您的需要，您可以加载使用淡出和切换元素，或者同样使用背景图像。我选择了双张图片，使用了一个分隔符，并假设由于所有图片的尺寸都相同，那么它们的尺寸将始终相同。

下面的代码使用来自单击元素的数据属性在数组中查找索引，然后将图像加载到临时 img 中，淡出原始图像，设置原始图像的 url，然后显示它。

var images = ["https://dummyimage.com/300x300/000/fff&text=Image+1", "https://dummyimage.com/300x300/000/fff&text=Image+2", "https://dummyimage.com/300x300/000/fff&text=Image+3"];
var spacer = 'https://dummyimage.com/300x300/4a314a/fff&text=Spacer';

$('.btn').click(function(){
		var $t = $(this);
    var tgt = parseFloat($t.attr('data-target'));
		$('.btn').removeClass('active');
		$t.addClass('active');
	 	$("#temp").attr("src",images[tgt]);
      $("#output").fadeOut('300', function() {
        $("#output").attr("src",images[tgt]).show();
        $("#temp").attr("src",spacer);
      });
});

.btn {background:grey;}
.btn.active{background:green;}

#imgswap {position:relative;}
#imgswap>img {position:absolute;top:0;left:0;}
#output {z-index:2;}
#temp {z-index:1;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn1 active" data-target="0">
  Button 1
</button>
<button class="btn btn2 inactive" data-target="1">
  Button 2
</button>
<button class="btn btn3 inactive" data-target="2">
  Button 3
</button>

<br>
<br>

<div id="imgswap">
  <img id="output" src="https://dummyimage.com/300x300/000/fff&text=Image+1">
  <img id="temp" src="https://dummyimage.com/300x300/4a314a/fff&text=Spacer">
</div>

我认为以上内容应该足够好，如果您使用固定大小的图像，应该可以工作。

Answer 3

使用.fadeOut() 和.fadeIn() 获得与您正在寻找的相似的错觉。请记住，jQuery 中的所有动画函数都可以接受回调函数。

在下面的解决方案中，我在按下按钮后立即调用.fadeOut()，但也会传递一个回调函数，以便在 .fadeOut() 动画完成后执行。在该回调中，我正在更改图像的来源并立即排队另一个动画：= .fadeIn()

var images = ["https://dummyimage.com/300x300/000/fff&text=Image+1", "https://dummyimage.com/300x300/000/fff&text=Image+2", "https://dummyimage.com/300x300/000/fff&text=Image+3"];

$('.btn').click(function(){
	
	$('.btn').removeClass('active').addClass('inactive');
	$(this).removeClass('inactive').addClass('active');
	var new_src;
	
	     if ( $('.btn1').hasClass('active') ) { new_src = images[0]; } 
	else if ( $('.btn2').hasClass('active') ) { new_src = images[1]; } 
	else if ( $('.btn3').hasClass('active') ) { new_src = images[2]; }

    $('#output').fadeOut('slow',function(){
        $("#output").attr("src",new_src);
        $('#output').fadeIn();
    });
	
});

.active{background:green;}
.inactive{background:grey;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn1 active">
  Button 1
</button>
<button class="btn btn2 inactive">
  Button 2
</button>
<button class="btn btn3 inactive">
  Button 3
</button>

<br>
<br>

<img id="output" src="https://dummyimage.com/300x300/000/fff&text=Image+1">