Блог

У меня есть div, который перемещается по странице в прослушивателе событий keydown. Я пытаюсь найти способ остановить ее либо после определенного количества нажатий клавиш (вычисляется по шагу * щелчки> размер экрана), либо когда анимированный div достигает конца экрана, что, я полагаю, должно соответствовать размеру экрана.

В настоящее время анимация продолжает запускаться при нажатии клавиши, и div будет прокручиваться вне поля зрения.

Примером этого является вторая демонстрация на этой странице: http://api.jquery.com/animate/Вы можете нажимать влево или вправо, пока блок не исчезнет из поля зрения. Как бы я поместил это в контейнер?

вот мой jsfiddle: https://jsfiddle.net/vidro3/1a8tnuer /

 var count1 = 0;
var count2 = 0;
// 1. Get two divs to move on different key presses;
  $(function(){
    $(document).keydown(function(e){
     switch (e.which){
       case 39:    //lright arrow key
          count2  ;
        $('.box2').animate({
           left: ' =50'
         });
        break;
      case 90:    //z key
        count1  ;
        $('.box1').animate({
            left: ' =50'
            });
        break;
      }
  });
});

// 2. Get one div to move on button click;
$(function(){
$( '#start' ).click(function() {
  alert('Chug that Duff!');
   var rabbit = $(".rabbit");
   rabbit.animate({left: ' =100%'}, 'slow');
  });
});
$(function(){
  var winPos = $('#background').width();
    if (winPos/50 > count1)
    alert('Homer Wins!');
   else if (winPos/50 > count2)
    alert('Barney Wins!');
});
  

Просто добавьте условие к анимации:

 var maxLeft = $(window).width() - $('.box1').width();

// If the box's x-position is less than the max allowed, then animate
if ($('.box1').position().left < maxLeft) {
    $('.box1').animate({
        left: ' =50'
    });
}
  

Значение (ширина окна — ширина окна) — это точка, в которой окно находится в конце экрана. Обратите внимание, что размер вашего шага может занимать поле за пределами экрана в зависимости от текущего размера окна (например, он, вероятно, не делится на 50), поэтому вместо этого вам может понадобиться что-то вроде этого:

 var stepSize = 50;
var maxLeft = $(window).width() - $('.box1').width();

// If the box's x-position is less than the max allowed, then animate
if ($('.box1').position().left < maxLeft) {
    var diff = maxLeft - $('.box1').position().left;

    // If the next step would take the box partially off the screen
    if (diff < stepSize) {
        $('.box1').animate({
            left: ' ='   diff
        });
    } else {
        $('.box1').animate({
            left: ' ='   stepSize
        });
    }
}
  

Редактировать: вот более короткая версия, использующая троичный оператор:

 var stepSize = 50;
var maxLeft = $(window).width() - $('.box1').width();

// If the box's x-position is less than the max allowed, then animate
if ($('.box1').position().left < maxLeft) {
    var diff = maxLeft - $('.box1').position().left;

    $('.box1').animate({
        left: ' ='   (diff < stepSize ? diff : stepSize)
    });
}