动态更新动画函数外部的变量

我将如何动态更新函数外部的变量，然后能够使用它来使用另一个函数。在这种情况下，用户按右键并移动 50px。

<!doctype html>
<html>
  <head>
<title>Barry bounce</title>
<script src="js/plugins/charinfo.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body ng-app="myApp">
<div id="canvas">
  <img src="img/characters/BarryBall.png" id="barry" alt="">

</div>
</body>
<!-- jquery here -->
<script> 
var barryPosX;
var state = 0;
function getCurrentPos(position) {
  barryPosX = position.left;
};

$(document).keydown(function(e) {
  switch(e.which) {
    case 39:
      $("#barry").stop().animate({
        left: '+=350'
      }, function() {
          position = $("#barry").position();
          getCurrentPos(position);
            if(barryPosX > $("#canvas").width()) { 
              state = 1;
              console.log(state);
            }
      })
    break
    case 37:
      $("#barry").stop().animate({
        left: '-=350'
      });
    break
  }
})
    if (state == 1 ) {
    console.log(state);
}

</script>

我不明白为什么当图像超出"画布"div宽度时控制台不记录" 1"..有什么想法吗？

barryPosX已经在全局范围内，所以你可以像以前一样直接在getCurrentPos函数中将值分配给barryPosX。无需从动画回调中将值分配给 barryPosX。

如果需要，您还可以将值传递到 getCurrentPos 函数中，如下所示：

var barryPosX;
function getCurrentPos(position) {
  barryPosX = position.left;
};
$(document).keydown(function(e) {
  switch(e.which) {
    case 39:
      $("#barry").stop().animate({
        left: '+=50'
      }, function() {
          position = $("#barry").position();
          getCurrentPos(position);
      })
    break
    case 37:
      $("#barry").stop().animate({
        left: '-=50'
      });
    break
  }
})

barryPosX 的值也可以在 changeScreen 函数中访问。

相关内容

最新更新

热门标签：