javascript - 使用 Jquery 动画让一个按钮将一个框移动到下一个 Angular 落

Question

我刚开始使用 javascript 和 jquery，所以我在解决这个问题时遇到了一些问题。

我正在尝试使用 jquery 中的 animate 函数将一个框从一个 Angular 移动到另一个 Angular 。

• 框从屏幕的左上角开始，点击“开始”按钮后，它将移动到下一个 Angular (右上角)。
• 点击相同的“开始”按钮，然后将框移动到下一个 Angular (右下角)。
• 再次单击“开始”按钮会将其移动到下一个 Angular (左下角)。
• 再次单击“开始”按钮会将其移动到下一个 Angular (左上角，即起点)。

我附上了一张图片来准确说明我的意思: What the program should do!

所以，这就是我到目前为止所得到的:

$(document).ready(function () {
	$('#go').click(function(){
		var dest = parseInt($('#block').css('margin-left').replace('px', '')) + 100;
			if (dest > 0) {
				$('#block').animate({
				marginLeft: '1800px'
						}, 0 );
					}
			else {
				$('#block').animate({
				marginLeft: dest + 'px'
				}, 0 );
			}
		});
});

#block {
        width: 100px; 
		height: 100px; 
		background: red; 
		margin: 0px;
		top: 0px;
		left: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="block"></div>
	<button id="go">&raquo; Run</button>

我已将框移动到右上角，但无法弄清楚如何使用相同的按钮使其向下移动。我试过一些带开关的东西，但没有用。看起来像这样:

$(document).ready(function () {
$('#go').click(function(){
    var toggle = 1
        if (toggle == 1){
            $("#block").animate({left: "80px"});
            toggle = 0;
        } else{
            $("#block").animate({right: "80px"});
            toggle = 1;
        }
    });

我在想也许using cases to switch按钮将框移动到哪个坐标之间。但是，我不知道它如何与 jquery 和 animate 函数一起使用。

如果有人有任何其他想法或知道如何在这种情况下使用大小写开关，我将不胜感激并提前感谢您!

附言我已经尝试在这里搜索这个答案几个小时了，但没有找到对我有帮助的东西。我希望这个问题能帮助到和我有类似问题的其他人!

Answer 1

请试试这个例子:

$(document).ready(function () {
  var leftValue = window.innerWidth - 115; // 115 is a temp value
  var topValue = window.innerHeight - 115;
  var actionNum = 0;
  var movingBlock = $('#block');
  
  $('#go').click(function () {
    if (actionNum < 4) {
      actionNum++;    
    } else {
      actionNum = 1;
    }
    
    switch (actionNum) {
      case 1:
      	// move to the top right
        movingBlock.animate({
          left: leftValue + 'px',
          top: 0
        }, 1000);
      	break;
      case 2:
      	// move to the bottom right
        movingBlock.animate({
          left: leftValue + 'px',
          top: topValue + 'px'
        }, 1000);
        break;
      case 3:
       // move to the left bottom
       movingBlock.animate({
         top: topValue + 'px',
       	 left: 0
       }, 1000);
       break;
      case 4:
      	// move to the top left
        movingBlock.animate({
          left: 0,
          top: 0
        }, 1000);
        break;
      default:
        break;
    }
  });
});

#block {
  width: 100px; 
  height: 100px; 
  background: red; 
  margin: 0px;
  top: 0px;
  left: 0px;
  position: relative;
  z-index: 1;
}
#go {
  z-index: 2;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="block"></div>
<button id="go">&raquo; Run</button>