Display/Hide content with fading

Question

I have the following jQuery code which you can also find in the JSfiddlehere:

/* Code for buttons individually */
$(document).ready(function() {
  $(".panel_button").on('click', function() {
    $(".panel").hide();
    var targetPanel = $(this).attr('data-target');
     $(targetPanel).show();
    $(this).toggleClass('active');
  });
});


/* Code for previous and next buttons */
$(document).ready(function(){
    $(".panel").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $(".next_button").click(function(){
        if ($(".panel:visible").next().length != 0)
            $(".panel:visible").next().show().prev().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:first").show();
        }
        return false;
    });

    $(".prev_button").click(function(){
        if ($(".panel:visible").prev().length != 0)
            $(".panel:visible").prev().show().next().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:last").show();
        }
        return false;
    });
});

body {
  height: 500px;
}

.contents {
  width: 100%;
  height: 20%;
}

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button, .prev_button, .next_button {
  float: left;
  width: 20%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

#panel1, #panel2, #panel3 {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents">

  <div id="panel1" class="panel">
    <div class="content_01a">Here goes content1a</div>
    <div class="content_01b">Here goes content1b</div>
  </div>

  <div id="panel2" class="panel">
    <div class="content_02a">Here goes content2a</div>
    <div class="content_02b">Here goes content2b</div>
    <div class="content_02c">Here goes content2c</div>
  </div>

  <div id="panel3" class="panel">
    <div class="content_03a">Here goes content3a</div>
    <div class="content_03b">Here goes content3b</div>
  </div>

</div>

<div class="buttons">
  
  <div class="prev_button"> PREVIOUS </div>

  <div class="panel_button" data-target="#panel1"> Button_01 </div>
  <div class="panel_button" data-target="#panel2"> Button_02 </div>
  <div class="panel_button" data-target="#panel3"> Button_03 </div>
  
  <div class="next_button"> NEXT </div>
  
</div>

As you can see in the code above I want to show/hide contents when a button is clicked.
All this works fine so far.

---

Now I want to add a fading animation to the show/hide of the contents. Therefore, I tried to change the .hide to .fadeOut and the .show to .fadeIn as you can see in the JSfiddle here but unfortunatley this animation does not really run smoothly.
The contents first appear below the previous content and once the previous content is fully faded out they jump to their final position.

Do you know what I have to change in my code to avoid this jumping?

Answer 1

Hi better to add some duration to fadeIn or fadeOut to make it more animated also add css

 #panel1, #panel2, #panel3 {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
  position: absolute;
}

I updated your fiddle please take a look with new animation.

Answer 2

Asper @Thielicious you need to add position absolute for those panel to keep all of those in the same position so that they aren't blink and you can add call back function to show desire panel after fadeout all panel expect which one you want to show.

  $(".panel_button").on('click', function() {
      var id=$(this).data('target');
      $(".panel:not('"+id+"')").fadeOut('slow',function(){
       $(id).fadeIn('slow');
      })
 });

http://jsfiddle.net/koanfw15/55/

Answer 3

#panel1, #panel2, #panel3 {
  position: absolute; // <-- add this line
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}

Fix: http://jsfiddle.net/Dezain/ydgx3szt/

Answer 4

You can add duration to your fade in and fade out. I have addded a lil bit duration for you.

  

  /* Code for buttons individually */
    /* Code for buttons individually */
$(document).ready(function() {
  $(".panel_button").on('click', function() {
    $(".panel").fadeOut(1000);
    var targetPanel = $(this).attr('data-target');
     $(targetPanel).fadeIn(1000);
    $(this).toggleClass('active');
  });
});


/* Code for previous and next buttons */
$(document).ready(function(){
    $(".panel").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $(".next_button").click(function(){
        if ($(".panel:visible").next().length != 0)
            $(".panel:visible").next().fadeIn(1000).prev().fadeOut(1000);
        else {
            $(".panel:visible").fadeOut(1000);
            $(".panel:first").fadeIn(1000);
        }
        return false;
    });

    $(".prev_button").click(function(){
        if ($(".panel:visible").prev().length != 0)
            $(".panel:visible").prev().fadeIn(1000).next().fadeOut(1000);
        else {
            $(".panel:visible").fadeOut(1000);
            $(".panel:last").fadeIn(1000);
        }
        return false;
    });
});

body {
  height: 500px;
}

.contents {
  width: 100%;
  height: 20%;
}

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button, .prev_button, .next_button {
  float: left;
  width: 20%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

#panel1, #panel2, #panel3 {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents">

  <div id="panel1" class="panel">
    <div class="content_01a">Here goes content1a</div>
    <div class="content_01b">Here goes content1b</div>
  </div>

  <div id="panel2" class="panel">
    <div class="content_02a">Here goes content2a</div>
    <div class="content_02b">Here goes content2b</div>
    <div class="content_02c">Here goes content2c</div>
  </div>

  <div id="panel3" class="panel">
    <div class="content_03a">Here goes content3a</div>
    <div class="content_03b">Here goes content3b</div>
  </div>

</div>

<div class="buttons">
  
  <div class="prev_button"> PREVIOUS </div>

  <div class="panel_button" data-target="#panel1"> Button_01 </div>
  <div class="panel_button" data-target="#panel2"> Button_02 </div>
  <div class="panel_button" data-target="#panel3"> Button_03 </div>
  
  <div class="next_button"> NEXT </div>
  
</div>