javascript - 回调函数中未声明的变量

Question

我很难全神贯注于此。

我有一个鼠标悬停功能，它将两个变量设置为当前的 margin-top 和 margin-left css 属性，然后执行动画。在 mouseout 上，我希望同时调用这两个变量，但我不断收到“变量未定义”错误...

$("#featInstructors li a").mouseover(function() {
  var mTop = $(this).find("img.instructor").css("margin-top");
  var mLeft = $(this).find("img.instructor").css("margin-left");
  $(this)
    .find("img.instructor")
    .animate({
      width: "115px",
      height: "115px",
      top: "50%",
      left: "50%",
      marginTop: "-57.5px",
      marginLeft: "-57.5px"}, 200);
    })
    .mouseout(function() {
      $(this)
        .find("img.instructor")
        .animate({
          width: "200px",
          height: "200px",
          top: "0",
          left: "0",
          marginTop: mTop,
          marginLeft: mLeft
        }, 200);
    });
});

我在这里错过了什么？

Answer 1

var mTop;
var mLeft;

$("#featInstructors li a").mouseover(function() {
  mTop = $(this).find("img.instructor").css("margin-top");
  mLeft = $(this).find("img.instructor").css("margin-left");
$(this)
.find("img.instructor")
.animate({
  width: "115px",
  height: "115px",
  top: "50%",
  left: "50%",
  marginTop: "-57.5px",
  marginLeft: "-57.5px"}, 200);
})
.mouseout(function() {
  $(this)
    .find("img.instructor")
    .animate({
      width: "200px",
      height: "200px",
      top: "0",
      left: "0",
      marginTop: mTop,
      marginLeft: mLeft
    }, 200);
});
});

没试过，但可能有用

或者这个

.mouseout(function(a,b) {
  $(this)
    .find("img.instructor")
    .animate({
      width: "200px",
      height: "200px",
      top: "0",
      left: "0",
      marginTop: a,// mTop
      marginLeft: b//mLeft
    }, 200);
});