Question

我刚开始使用javascript和jquery，因此在弄清楚这一点时遇到了一些问题。

我试图在jquery中使用animate函数将一个盒子从一个角移动到另一个角。

该框始于屏幕的左上角，单击“开始”按钮后，它将移至下一个角（右上角）。
单击相同的“开始”按钮，然后将框移到下一个角（右下角）。
再次单击“开始”按钮会将其移至下一个角（左下角）。
再次单击“开始”按钮会将其移至下一个角（左上角，即开始）。

我提供了一张图片，以准确显示我的意思： 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和动画功能一起使用。

如果任何人有其他想法或知道如何在这种情况下使用案例切换，我将不胜感激，并在此先感谢您！

P.S。我已经尝试在这里搜索这个答案几个小时了，但没有发现什么对我有帮助。我希望这个问题能为其他遇到类似问题的人提供帮助！

Answer 1

请尝试以下示例：

    soup = BeautifulSoup(html_string,"lxml")


    <span class="glyphicons glyphicons-embed-close details-list-item-icon" 
    title="Source Code"></span>
    <a href="*https://github.com/UnitedBitcoin*" target="_blank" 
    rel="noopener">Source Code</a>

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

Answer 2

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

所以我建议一些简单的解决方案，就是将绝对位置放在div上，

然后在检查条件后更改（动画化）此鞋last的左侧或顶部，

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

请参见belwon代码段（添加了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>

使用Jani动画使按钮将框移动到下一个角落

2 个答案: