Question

我试图让我的角色对角移动。我的目标是让他走向门，取决于我点击哪个门。屏幕上有两扇门;左上门和右上门。现在，当我点击左上门时，他朝那扇门移动，但是当我点击右上门时，他直接移动。我不知道我在哪里出错，我真的可以帮忙。

这是我到目前为止的代码：

＆＃13;

$(document).ready(function() {

  //center the character
  function centreThing(obj) {
    //this is the height and width of heartless
    h = $(obj).height();
    w = $(obj).width();
    $(obj).css({
      //this is the height and width of the stage
      //height and width of stage by 2 - height and width of heartless by 2
      top: $('#stage').height() / 2 - h / 2,
      left: $('#stage').width() / 2 - w / 2,
      right: $('#stage').width() / 2 - w / 2
    })
  }
  centreThing('#character');

  //speech
  var progress = 0;
  var txt;

  //click the door to go to next page
  //animate character to the left door
  $('#door1').click(function() {
    $('#character').animate({
      top: 0,
      left: 150
    }, {
      duration: 1000,
      complete: function() {
        alert("entered");
      }
    });
  });

  //click the door to go to next page
  //animate character to the right door
  $('#door2').click(function() {
    $('#character').animate({
      top: 0,
      right: 150
    }, {
      duration: 1000,
      complete: function() {
        alert("entered");
      }
    });
  });

}); // do not delete this line

＆＃13;

#character {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 99;
}

#door1 {
  background-image: url("https://placehold.it/50x50?text=closeddoor");
  position: absolute;
  width: 80px;
  height: 60px;
  top: -3px;
  left: 130px;
  z-index: 5;
}

#door1:hover {
  background-image: url("https://placehold.it/50x50?text=opendoor");
  position: absolute;
  width: 80px;
  height: 60px;
  top: -3px;
  left: 130px;
}

#door2 {
  background-image: url("https://placehold.it/50x50?text=closeddoor");
  position: absolute;
  width: 80px;
  height: 60px;
  top: -3px;
  left: 510px;
}

#door2:hover {
  background-image: url("https://placehold.it/50x50?text=opendoor");
  position: absolute;
  width: 80px;
  height: 60px;
  top: -3px;
  left: 510px;
  z-index: 5;
}

#stage {
  position: relative;
  width: 720px;
  height: 480px;
  margin: auto;
  margin-top: 100px;
  background-color: black;
  border-style: solid;
  border-width: 5px;
  border-color: white;
}

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>MAS340</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
  <div id="stage">
    <img src="https://placehold.it/50x50?text=character" id="character" class="center">
    <div id='door1'></div>
    <div id='door2'></div>
  </div>
</body>

</html>

＆＃13;

Answer 1

尝试这样做。点击centreThing()时设置左侧位置。因为您在#door2中设置了角色的左侧位置，所以会发生这种情况。所以点击#door2字符有左，右和顶值。所以它从左边的值开始。我在点击$(document).ready(function() { //center the character function centreThing(obj) { //this is the height and width of heartless h = $(obj).height(); w = $(obj).width(); $(obj).css({ //this is the height and width of the stage //height and width of stage by 2 - height and width of heartless by 2 top: $('#stage').height()/2-h/2, left: $('#stage').width()/2-w/2, right: $('#stage').width()/2-w/2 }) } centreThing('#character'); //speech var progress = 0; var txt; //click the door to go to next page //animate character to the left door $('#door1').click(function() { $('#character').animate({ top: 0, left: 150 }, { duration: 1000, complete: function() { alert("entered"); } }); }); //click the door to go to next page //animate character to the right door $('#door2').click(function() { $('#character').css({ 'left':'' }).animate({ top: 0, right: 150 }, { duration: 1000, complete: function() { alert("entered on 2"); } }); }); }); // do not delete this line时删除了左边的值并且它有效

#character {
	position: absolute;
/*	bottom: 0px;
	left: 0px;
	right: 0px;*/
	z-index: 99;
}

#door1 {
  background:#F00;
	background-image: url(images/closeddoor.png);
	position: absolute;
	width: 80px;
	height: 60px;
	top: -3px;
	left: 130px;
	z-index: 5;	
}

#door1:hover {
	background-image: url(images/opendoor.png);
	position: absolute;
	width: 80px;
	height: 60px;
	top: -3px;
	left: 130px;
}

#door2 {
  background:#FF0;
	background-image: url(images/closeddoor.png);
	position: absolute;
	width: 80px;
	height: 60px;
	top: -3px;
	left: 510px;
}

#door2:hover {
	background-image: url(images/opendoor.png);
	position: absolute;
	width: 80px;
	height: 60px;
	top: -3px;
	left: 510px;
	z-index: 5;
}

#stage {
	position: relative;
	width: 720px;
	height: 480px;
	margin: auto;
	margin-top: 100px;
	background-color: black;
	border-style: solid;
	border-width: 5px;
	border-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAS340</title>
<link href="styles.css" rel="stylesheet" />
<script src="jquery-3.1.1.min.js"></script>
<script>
</script>
</head>
<body>
	<div id="stage">
		<img src="images/character.png" id="character" class="center">
		<div id='door1'></div>
		<div id='door2'></div>
	</div>
</body>
</html>

d = d * np.ones((1,n))

尝试在jquery中设置对象动画的问题

1 个答案: