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

根据您的需要，您可以加载淡出和切换元素，或者同样使用背景图像。我选择了双重图像，使用了间隔符，并假设由于所有图像的尺寸相同，因此它们的大小始终相同。

下面的代码使用点击元素中的数据属性查找数组中的索引，然后将图像加载到temp img中，淡出原始文件，设置原始文件的网址，然后显示它。

＆＃13;

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);
      });
});

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

我认为上述情况应该对你有好处，如果你正在使用固定尺寸的图像，它应该可行。

Answer 3

使用.fadeOut()和.fadeIn()来实现您所寻找的类似错觉。请记住，jQuery中的所有动画函数都可以接受回调函数。

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

＆＃13;

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();
    });
	
});

＆＃13;

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

＆＃13;

<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">

＆＃13;

jQuery - 图像之间的转换而不是突然的改变

3 个答案: