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

Question

I am new to using javascript and jquery so I'm having some problems figuring this one out.

I am trying to use the animate function in jquery to move a box from one corner to the next.

• The box begins on the top-left corner of the screen and upon clicking the 'go' button, it will move to the next corner (top-right).
• Clicking the same 'go' button then moves the box to the next corner (bottom-right).
• Clicking the 'go' button once more will move it to the next corner (bottom-left).
• Clicking the 'go' button once more will move it to the next corner (top-left, which is the start).

I've included a picture to show exactly what I mean by this: What the program should do!

So, this is what I've got so far:

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

I've got the box to move to the top-right corner but cannot figure out how to make it now move down using the same button. I've tried something with a toggle but it did not work. That looked something like this:

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

I was thinking of maybe using cases to switch between which coordinates the button will move the box to. However, I have no knowledge of how this works with jquery and the animate function.

If anyone has any other ideas or knows how to use the case switches in this scenario, I would really appreciate it and thank you in advance!

P.S. I've tried searching this answer on here for a couple of hours now and have not found much that will help me. I am hoping this question will serve to help others who are having a similar problem to mine!

Answer 1

Please try this example:

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

There is a multi solution for your problem ,

So I suggest some simple solution , is that you pput position absolute to your div ,

then change (annimate) the left or top of this last after checking conditions ,

you can get top left position in Jquery using .position() funcion ,

See belwon Snippet (added , 1000 milisseconde in order to show annimation transition )

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>