Question

我很难将这个大脑缠绕在这个周围。

我有一个鼠标悬停功能，它将两个变量设置为当前margin-top和margin-left css属性，然后执行动画。在mouseout上，我想回想起这两个变量，但我不断得到一个＆＃34;变量未定义＆＃34;错误...

$("#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);
});

Answer 2

你的缩进是错误的。当我通过jsbeauifier.org运行代码时，会产生以下结果：

$("#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);
    });
});

您可以看到问题变得明显。变量在mouseover回调中声明。您需要在两个函数之外首先声明它：

var mTop, mLeft;

$("#featInstructors li a").mouseover(function() {
...

回调函数中未声明的变量

2 个答案: