Make jquery function waiting for animation

Question

I know that this has been asked a lot, but I still can not find the answer. I have two separate divs in my title, and when one is clicked, it has some fadeIn content in the main part of my page. I'm trying to make sure that if someone has already pressed, the new one must wait until the old one is fadeOut before it fades out. My problem is that it does not wait until the old one is fadeOut, it disappears to the far right. I left the functions for page_2, but they are identical, only with the corresponding switches and switches.

var about_me_clicked = false;
var page_2_clicked = false;

$(document).ready(function() {
$('#About_me').click(about_me_clicked_func);
$('#Page_2').click(page_2_clicked_func);

var about_me_clicked_func = function() {  
  if(page_2_clicked){
      $.when(toggle_page_2()).done(toggle_about_me());
      page_2_clicked = !page_2_clicked;
  }
  else toggle_about_me();
  about_me_clicked = !about_me_clicked;
}

var toggle_about_me = function() {
  //do some formatting....
  if (!about_me_clicked) {
      return $('#About_me_main').fadeIn('slow').promise();
  }
  else return $('#About_me_main').fadeOut('slow').promise();

.done() $.when(), . / fadeIn/fadeOut, , , ( ), . , !

Answer 1

, :

if($('#About_me_main').is(':animated'))

stop() :

$('#About_me_main').stop(true).fadeIn('slow');

Answer 2

.

, . , fadeOut fadeIn, :

$(function () {
        $('.btn').on('click', function () {
            $('.one').fadeOut('slow', function () {
                $('.two').fadeIn('slow');
            });
        });
    });

, fadeOut , fadeIn().