How can I fade out tab content div before loading the next?

Question

I'm using tabs to allow site visitors to navigate content in part of a web page.

It all works wonderfully, with one teeny-tiny minor issue—from what I can tell, clicking on a button jumps to the new content and fades it in.

Not a problem for some, but I'd like the original content to fade out before the new content is faded in because I'm fancy (and picky) like that.

Presumably one way this can be achieved by delaying the loading of the new content (which seems to be created by changing the display from "none" to "block") and allowing a button click to first affect (i.e. fade out) the existing content... Just brainstorming here.

Any help will be greatly appreciated.

This is the code I'm using (from https://www.w3schools.com/howto/howto_js_tabs.asp):

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 2s;
  animation: fadeEffect 2s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

<h3>Fade in Tabs</h3>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

Answer 1

What about this? Is this what you wanted?

Here is working fiddle: https://jsfiddle.net/Kretiss/1c5zeynx/6/

Here is your CSS:

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
}

Here is your HTML

  <h3>Fade in Tabs</h3>

  <div class="tab">
    <button class="tablinks" data-place="London">London</button>
    <button class="tablinks" data-place="Paris">Paris</button>
    <button class="tablinks" data-place="Tokyo">Tokyo</button>
  </div>

  <div class="tabcontent" data-place="London">
    <h3>London</h3>
    <p>London is the capital city of England.</p>
  </div>

  <div class="tabcontent" data-place="Paris">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
  </div>

  <div class="tabcontent" data-place="Tokyo">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
  </div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$(document).ready(function(){

  let switching = true;
  const defaultOpen = "London";

  $("button[data-place=" + defaultOpen + "]").addClass("active");
  $("div[data-place=" + defaultOpen + "]").fadeIn(250, function(){
    $(this).addClass("active");
    switching = false;
  });


  $(".tablinks").click(function(){
    const switchToAttr = $(this).attr("data-place");
    const switchTo = $("div[data-place=" + switchToAttr + "]");
    const prevDiv = $("div.active");

    if(!switching && switchToAttr != prevDiv.attr("data-place")){
      switching = true;

      $("button.active").removeClass("active");
      prevDiv.removeClass("active");

      $(this).addClass("active");
      switchTo.addClass("active");

      prevDiv.fadeOut(250, function(){
        switchTo.fadeIn(250);
        switching = false;
      });

    }

  });

});

</script>

When page is loaded, JQuery fadeIn tab London. After that you can click on any tab you want and it first checks, if last switch is complete and if tab is different then what is now active. Then it simply just switch classes and do fadeIn effect, which is fired after fadeOut of previous div is complete, as you wanted.