Используйте Jquery animate, чтобы кнопка переместила поле на следующий угол.

Question

Я новичок в использовании javascript и jquery, поэтому у меня возникли проблемы с его выяснением.

Я пытаюсь использовать функцию animate в jquery для перемещения поля из одного угла в другой.

• Поле начинается в верхнем левом углу экрана и, нажав кнопку «Перейти», перемещается в следующий угол (вверху справа).
• Нажатиета же кнопка «перейти» затем перемещает блок в следующий угол (внизу справа).
• Еще раз нажав кнопку «Перейти», вы переместитесь в следующий угол (внизу слева).
• При повторном нажатии кнопки «go» она переместится в следующий угол (верхний левый угол, который является началом).

Я включил картинку, чтобы показать точночто я имею в виду под этим: Что должна делать программа!

Итак, вот что я получил:

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

Я подумал, может быть, , используя кейсы для переключения между координатами, в которые кнопка переместит прямоугольник.Однако я не знаю, как это работает с jquery и функцией animate.

Если у кого-то есть какие-либо идеи или он знает, как использовать переключатели регистров в этом сценарии, я был бы очень признателен и заранее благодарен вам!

PS Я попытался найти этот ответ навот уже пару часов так и не нашел много, что мне поможет.Я надеюсь, что этот вопрос поможет другим, у которых проблема похожа на мою!

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,

, затем меняете (аннулируете) левую или верхнююиз этого последнего после проверки условий,

вы можете получить верхнюю левую позицию в Jquery, используя .position () funcion,

См. фрагмент кода (добавлен, 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>