使用Jquery animate可以让按钮将框移动到下一个角

Question

我是javascript和jquery的新手，所以在理解这一点时遇到了一些问题。

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

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

我附上了一张图片，以准确地说明我的意思：程序应该做什么

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

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

我想使用case在按钮将框移动到哪个坐标之间切换。然而，我不知道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>

Answer 2

您的问题有多种解决方案，

所以我建议一些简单的解决方案，就是你把你的div的绝对位置，

然后在检查条件后更改(annimate(最后一个的左侧或顶部，

您可以使用.position((函数、在Jquery中获得左上角的位置

参见belwon Snippet(增加1000毫秒以显示湮灭过渡(

var widh_annimation = "400px";
var hieght_annimation = "100px";
$(document).ready(function () {
	$('#go').click(function(){
		  var position = $("#block").position();
var annimation = {};
if(position.left == 0 && position.top == 0) {
annimation = { left:widh_annimation};
}else if(position.left > 0 && position.top == 0) {
annimation = { top:hieght_annimation};
}else if(position.left > 0 && position.top > 0) {
annimation = { left:"0"};
}else if(position.left == 0 && position.top > 0) {
annimation = { top:"0"};
}      
$('#block').animate(annimation, 1000 );
		});
});

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

<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>