javascript - 为什么这个变量在我的函数中不起作用？

Question

变量“abtBack”包含一个 if 语句，当在 xBttn click 函数之后运行时，应该允许屏幕上的单词“About”移回其原始位置。出于某种原因，当我尝试运行变量时，与我不尝试运行它们时没有什么不同。我省略了我认为对解决这个问题不重要的代码部分。请在下面的 fiddle 中引用我的完整代码。
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

变量abtLeft 是main 函数的局部变量，因此不能在abtBack 函数中访问。要么将此变量的声明移到两个函数之外，要么将 abtBack 的定义放在 main 中。

另一个问题是 this 没有设置到你想要在 abtBack 和 prtBack 函数中设置动画的元素，所以 $(this).animate() 将不起作用。使用 $('#prt').animate() 和 $('#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>