jQuery动画图像，位置，宽度和高度

Question

我有一种动画“ img”的情况，当我将var完整的内部click函数放置时，它不会进行动画处理，但是当我将其置于外部函数中时，它将起作用。它是否具有全局和局部作用域？ 谢谢

var complete = true;


$("img").click(function() {

    if (complete) {

        $(this).animate({
            left: "50%",
            top: "400px",
            width: "300px",
            height: "300px"

        }, 700);

    } else {

        $(this).animate({
            left: "8px",
            top: "10px",
            width: "150px",
            height: "150px"
        }, 700);
    }

    complete = !complete;
});

Answer 1

如果你把

var complete = true;

在click处理程序的回调内部，每次调用该函数时，它将被定义为true ，这实际上将该函数重新定义为

$("img").click(function() {

  if (true) {

    $(this).animate({

      left: "50%",
      top: "400px",
      width: "300px",
      height: "300px"

    }, 700);

  } else {

    $(this).animate({

      left: "8px",
      top: "10px",
      width: "150px",
      height: "150px"

    }, 700);

  }

});

并通过进一步简化：

$("img").click(function() {

  $(this).animate({

    left: "50%",
    top: "400px",
    width: "300px",
    height: "300px"

  }, 700);

});

通过在函数外部定义complete的变量，变量的值将保留到函数的单个调用之外，从而允许在每次调用时切换全局状态。