Why is this variable not working in my function?

Question

The variable "abtBack" contains an if statement that when ran after the xBttn click function should allow the word "About" on the screen move back to its original position. For some reason when I try to run the variables nothig different happens from when I didn't try to run them. I left out what parts of the code I feel are not important to solve this problem. Please refer to my full code in the Fiddle below.
JSFiddle

<div id='bckDrp'>
  <div id='nav'>
    <img src='https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons-round/512/Button_12-128.png' id='xBttn'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
      <li class='navOp' id='prt'>Portfolio</li>
    </ul>
  </div>
</div>

---

var abtBack = function() {
  if ($('#abt').offset().left == (abtLeft - 210)) {
    $(this).animate({
      left: "+=210"
    }, 450);
  } 
}

var main = function() {
  //When any tab is clicked
  $('#hme, #abt, #prt').click(function() {
    $('#xBttn').toggle(300);
    $('#xBttn').click(function() {
      $('#xBttn').fadeOut(300);
      $('#hme, #abt, #prt').animate({
        opacity: 1
      }, 300);
      abtBack();
    })
  })

  var abtLeft = $('#abt').offset().left;
  //When About tab is clicked
  $('#abt').click(function() {
    if ($('#hme, #prt').css('opacity') == 0) {
      $('#hme, #prt').animate({
        opacity: 1
      }, 300);
    } else {
      $('#hme, #prt').animate({
        opacity: 0
      }, 300);
    }
}

Answer 1

The variable abtLeft is local to the main function, so it can't be accessed in the abtBack function. Either move the declaration of this variable outside both functions, or put the defintion of abtBack inside main.

Another problem is that this is not set to the element you want to animate in the abtBack and prtBack functions, so $(this).animate() won't work. Use $('#prt').animate() and $('#abt').animate().

var main = function() {
  var prtBack = function() {
    if ($('#prt').offset().left == (prtLeft - 430)) {
      $('#prt').animate({
        left: "+=430"
      }, 450);
    } else {
      $('#prt').animate({
        left: "-=430"
      }, 450);
    }
  }
  var abtBack = function() {
    if ($('#abt').offset().left == (abtLeft - 210)) {
      $('#abt').animate({
        left: "+=210"
      }, 450);
    }
  }

  //When any tab is clicked
  $('#hme, #abt, #prt').click(function() {
    $('#xBttn').toggle(300);
    $('#xBttn').click(function() {
      $('#xBttn').fadeOut(300);
      $('#hme, #abt, #prt').animate({
        opacity: 1
      }, 300);
      abtBack();
      prtBack();
    })
  })

  //When Home tab is clicked
  $('#hme').click(function() {
    if ($('#abt, #prt').css('opacity') == 0) {
      $('#abt, #prt').animate({
        opacity: 1
      }, 300);
    } else {
      $('#abt, #prt').animate({
        opacity: 0
      }, 300);
    }
  });

  var abtLeft = $('#abt').offset().left;
  //When About tab is clicked
  $('#abt').click(function() {
    if ($('#hme, #prt').css('opacity') == 0) {
      $('#hme, #prt').animate({
        opacity: 1
      }, 300);
    } else {
      $('#hme, #prt').animate({
        opacity: 0
      }, 300);
    }

    if ($('#abt').offset().left == (abtLeft - 210)) {
      $(this).animate({
        left: "+=210"
      }, 450);
    } else {
      $(this).animate({
        left: "-=210"
      }, 450);
    }
  });


  var prtLeft = $('#prt').offset().left;
  //When About tab is clicked
  $('#prt').click(function() {
    if ($('#hme, #abt').css('opacity') == 0) {
      $('#hme, #abt').animate({
        opacity: 1
      }, 300);
    } else {
      $('#hme, #abt').animate({
        opacity: 0
      }, 300);
    }

    if ($('#prt').offset().left == (prtLeft - 430)) {
      $(this).animate({
        left: "+=430"
      }, 450);
    } else {
      $(this).animate({
        left: "-=430"
      }, 450);
    }
  });
}



$(document).ready(main);

body {
  background: url('http://silviahartmann.com/background-tile-art/images/grey-repeating-background-8.jpg');
}
.mvLeft {
  right: 215px;
}
#bckDrp {
  left: 50%;
  transform: translate(-50%, 0);
  position: fixed;
  width: 85%;
  height: 100%;
  background: url('http://blog.spoongraphics.co.uk/wp-content/uploads/2012/textures/18.jpg');
}
#nav {
  background: rgba(0, 0, 0, 0.20);
}
.padExt {
  width: 100%;
  height: 100%;
  padding: 10px;
}
#nwsArea {
  height: 65%;
  width: 40%;
  background-color: grey;
  -webkit-transition: transform 1s, box-shadow 1s;
  border: 2px solid silver;
  box-shadow: 0 0 15px #777;
}
#nwsArea:hover {
  transform: skewY(3deg);
  box-shadow: -5px 15px 10px #777;
}
#nwsTtl {
  height: 100px;
  width: 100%;
  background-color: white;
  border-radius: 5px;
  text-align: center;
  border: 2px solid black;
}
#nwsTtl:hover {
  background-color: #E3E3E3;
}
#nwsTxt {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 40px;
}
#ruschin {
  height: 90%;
  width: 90%;
  padding: 5%;
}
#xBttn {
  height: 20px;
  padding: 8px;
  position: absolute;
  display: none;
}
#navLst {
  margin: 0 auto;
  text-align: center;
}
li {
  list-style-type: none;
  display: inline-block;
  -webkit-transition: color .5s;
}
li:hover {
  color: #2B2B2B;
}
.navOp {
  padding: 50px;
  font-size: 40px;
  font-family: 'Droid Sans', sans-serif;
}
#abt,
#prt {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='bckDrp'>
  <div id='nav'>
    <img src='https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons-round/512/Button_12-128.png' id='xBttn'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
      <li class='navOp' id='prt'>Portfolio</li>
    </ul>
  </div>
  <div class='padExt'>
    <div id='nwsArea'>
      <img src='https://www.scmp.com/sites/default/files/2014/05/20/tpbje20140520272_43042097.jpg' id='ruschin'>
      <div id='nwsTtl'>
        <h3 id='nwsTxt'>Russia and China begin joint military drill</h3>
      </div>
    </div>
  </div>
</div>