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

Question

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

我正在尝试使用 jquery 中的动画功能将方框从一个角移动到另一个角。

该框从屏幕的左上角开始，单击 'go' 按钮后，它将移动到下一个角（右上角）。
单击相同的 'go' 按钮，然后将框移动到下一个角（右下角）。
再次单击 'go' 按钮会将其移动到下一个角（左下角）。
再次单击 'go' 按钮会将其移动到下一个角（左上角，即起点）。

我附上了一张图片来准确说明我的意思： 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 函数一起使用。

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

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

Answer 1

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

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

然后在检查条件后更改（动画化）最后一个的左侧或顶部，

您可以使用 .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>

Answer 2

请试试这个例子：

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

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

Use Jquery animate to have a button move a box to the next corner

html

javascript

css

jquery

jquery-animate