Fade in and out between images without white space

Question

I know this question has been asked before — I've truly done my best to try to make use of the responses — but I just cannot for the life of me figure out how to map the responses onto my own code. (Relatively new to coding, so I am having difficulty reverse-engineering the responses to code that is quite different from my own.)

I'm trying to fade between image1 and image2 on load, but I keep getting the white space in between.

https://jsfiddle.net/68xsn01r/4/

<div id="container1" class="container">
 
 <img class="image1" src="https://i.imgur.com/XJZvyAh.jpg" alt="Mandarinazul" width="100%" height="100%" />
 
      <img class="image2" src="https://i.imgur.com/7iOp5Xc.jpg" alt="Mandarinazul" width="100%" height="100%" />
      
   
   
 <span id="wrapper">
       &rarr;
</span>
</div>

JQuery:

$("#container1").fadeIn("fast",function(){

  $(".image2").fadeIn("slow", function(){
  
    $(".image1").fadeIn("slow", function(){
        
      });
        
      });
 
   });

I am trying to work this out as part of a project. What changes do I need to make to my JS Fiddle?

Answer 1

Use On click function jquery and then use Radio button to select the image so that on click radio button according to selected radio button jquery fade in or out the image.

<div class="color-choose">
      <div>
        <input data-image="red" type="radio" id="red" name="color" value="red" checked>
        <label for="red"><span></span></label>
      </div>
      <div>
        <input data-image="blue" type="radio" id="blue" name="color" value="blue">
        <label for="blue"><span></span></label>
      </div>
      <div>
        <input data-image="black" type="radio" id="black" name="color" value="black">
        <label for="black"><span></span></label>
      </div>
    </div>

and images are look like this

<div class="left-column">
    <img data-image="black" src="abc.jpg" 
 alt="">
<img data-image="blue" src="abd.jpg" alt="">
<img data-image="red" class="active" src="abs.jpg" alt="">

and script

<script>
    $(document).ready(function() {

     $('.color-choose input').on('click', function() {
  var headphonesColor = $(this).attr('data-image');

  $('.active').removeClass('active');
  $('.left-column img[data-image = ' + headphonesColor + 
  ']').addClass('active');
  $(this).addClass('active');
  });

});
</script>

and use jquery cdn too