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

变量“abtBack”包含一条if语句，当在xbtn click函数之后运行该语句时，应允许屏幕上的“About”字移回其原始位置。由于某种原因，当我尝试运行变量时，与我没有尝试运行变量时没有什么不同。我遗漏了代码中我认为对解决这个问题不重要的部分。请参阅下面小提琴中我的完整代码。

---

变量

abtLeft

是

main

函数的本地变量，因此无法在

abtBack

函数中访问该变量。将此变量的声明移到两个函数之外，或将

abtBack

的定义放在

main

内部

另一个问题是，

this

未设置为要在

abtBack

和

prtBack

函数中设置动画的元素，因此

$（this）.animate（）

不起作用。使用

$（'prt'）.animate（）

和

$（'abt'）.animate（）

var main=function（）{
var prtBack=函数（）{
如果（$（'#prt'）.offset（）.left==（prtLeft-430））{
$（'#prt'）。设置动画({
左：“+=430”
}, 450);
}否则{
$（'#prt'）。设置动画({
左：“-=430”
}, 450);
}
}
var abtBack=函数（）{
如果（$（'#abt'）.offset（）.left==（abtLeft-210））{
$（'#abt'）。设置动画({
左：“+=210”
}, 450);
}
}
//单击任何选项卡时
$（'#hme，#abt，#prt'）。单击（函数（）{
$（'xBttn'）。切换（300）；
$（'#xbtn'）。单击（函数（）{
$（'xBttn'）。淡出（300）；
$（'#hme，#abt，#prt'）。动画({
不透明度：1
}, 300);
abtBack（）；
prtBack（）；
})
})
//单击“主页”选项卡时
$（'#hme'）。单击（函数（）{
if（$（'#abt，#prt'）.css（'opacity'）==0）{
$（'#abt，#prt'）。设置动画({
不透明度：1
}, 300);
}否则{
$（'#abt，#prt'）。设置动画({
不透明度：0
}, 300);
}
});
var abtLeft=$（'#abt'）.offset（）.left；
//单击“关于”选项卡时
$（'#abt'）。单击（函数（）{
if（$（'hme，'prt'）.css（'opacity'）==0）{
$（'#hme，#prt'）。动画({
不透明度：1
}, 300);
}否则{
$（'#hme，#prt'）。动画({
不透明度：0
}, 300);
}
如果（$（'#abt'）.offset（）.left==（abtLeft-210））{
$（此）。设置动画({
左：“+=210”
}, 450);
}否则{
$（此）。设置动画({
左：“-=210”
}, 450);
}
});
var prtLeft=$（'#prt'）.offset（）.左；
//单击“关于”选项卡时
$（'#prt'）。单击（函数（）{
if（$（'hme，'abt'）.css（'opacity'）==0）{
$（'hme，'abt'）。动画({
不透明度：1
}, 300);
}否则{
$（'hme，'abt'）。动画({
不透明度：0
}, 300);
}
如果（$（'#prt'）.offset（）.left==（prtLeft-430））{
$（此）。设置动画({
左：“+=430”
}, 450);
}否则{
$（此）。设置动画({
左：“-=430”
}, 450);
}
});
}
$（文件）.ready（主）
正文{
背景：url（'http://silviahartmann.com/background-tile-art/images/grey-repeating-background-8.jpg');
}
mvLeft先生{
右：215px；
}
#bckDrp{
左：50%；
转换：转换（-50%，0）；
位置：固定；
宽度：85%；
身高：100%；
背景：url（'http://blog.spoongraphics.co.uk/wp-content/uploads/2012/textures/18.jpg');
}
#导航{
背景：rgba（0,0,0,0.20）；
}
padExt先生{
宽度：100%；
身高：100%；
填充：10px；
}
#nwsArea{
身高：65%；
宽度：40%；
背景颜色：灰色；
-webkit转换：转换1s，框阴影1s；
边框：2件纯银；
盒影：0 0 15px#777；
}
#nwsArea：悬停{
变换：歪斜（3deg）；
盒影：-5px15px 10px#777；
}
#nwsTtl{
高度：100px；
宽度：100%；
背景色：白色；
边界半径：5px；
文本对齐：居中；
边框：2件纯黑；
}
#nwsTtl：悬停{
背景色：#E3；
}
#nwsTxt{
字体系列：“Roboto Condensed”，无衬线；
字体大小：40px；
}
#罗斯钦{
身高：90%；
宽度：90%；
填充：5%；
}
#XBTN{
高度：20px；
填充：8px；
位置：绝对位置；
显示：无；
}
#导航{
保证金：0自动；
文本对齐：居中；
}
李{
列表样式类型：无；
显示：内联块；
-webkit过渡：颜色。5s；
}
李：悬停{
颜色：#2b2b；
}
纳沃普先生{
填充：50px；
字体大小：40px；
字体系列：“Droid Sans”，无衬线；
}
#abt，
#prt{
位置：相对位置；
}


家
关于
投资组合

俄中开始联合军事演习
但问题是什么？当我尝试运行变量时，没有发生任何变化。什么都没有？关于错误
uncaughtreferenceerror:abtLeft没有在Javascript控制台中定义呢？我没有看到这一点？短语“runthevariable”真的没有任何意义。运行您的代码片段。我把它修好了一点，但它还是很笨重。我可能只是用另一种方式重新编码，我建议使用CSS转换来设置动画，而不是jQuery。
<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);
    }
}