jQuery - Transition between images instead of sudden change

Question

I am showing and hiding images depending on a button click by changing the src like this...

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

This is working but I would like the images to transition into each other instead of just suddenly change

I know I can fade out and then in but is there a way to fade one into another instead?

Possible duplicate of [jQuery fade to new image](https://stackoverflow.com/questions/1977557/jquery-fade-to-new-image) — , Jan 30 '18 at 12:10
you need two img tag with absolute position and change images in them one after another with delay — Piyush Sharma, Jan 30 '18 at 12:16

score 0 · Answer 1 · edited Jan 30 '18 at 12:18

0

You can achieve this by using fadeIn(), fadeOut() function:

$("#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");

edited Jan 30 '18 at 12:18

Albert Einstein

7,472
8
36
71

answered Jan 30 '18 at 12:13

Piyush Sharma

113
1
8

score 0 · Answer 2 · answered Jan 30 '18 at 12:21

Depending on your needs, you can load use fade out and switch elements, or likewise use a background image. I've opted for a double image, using a spacer and assumed that since all your images are the same dimensions, then they will always been the same size.

The code below looks for the index in the array using a data attribute from the clicked element, then loads the image into the temp img, fades out the original, sets the url of the original and then shows it.

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>

I think the above should do you well enough and should work if you're using fixed-size images.

Ahmad · Answer 3 · 2018-01-30T12:18:24.273

Use .fadeOut() and .fadeIn() to acheive a similar illusion to what you are looking for. Remeber that all animation functions in jQuery can accept a callback function.

In my solution below, I am calling .fadeOut() immediately after the button is pressed, but also pass a call back function to be executed once the .fadeOut() animation is finished. In that callback, I am chaning the source of the image and immediately queuing another animation:= .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">

That's the opposite of what I am trying to achieve, I want to transition between the images, not fade one out and then fade another in — fightstarr20, Jan 30 '18 at 12:12
I am trying to fade in over the other image, not fade one out and then fade another in — fightstarr20, Jan 30 '18 at 12:15

jQuery - Transition between images instead of sudden change

3 Answers3