在页面[jQuery]上的某个位置停止动画

Question

我有一个div在keydown事件监听器的页面上移动。我试图找到一种方法，在一定数量的关键字（通过步骤*点击>屏幕尺寸计算）之后停止，或者当动画div到达屏幕的末尾时，我想要对其做出响应屏幕尺寸。

当前动画继续在keydown上触发，div将滚动出视图。

这是本页上的第二个演示示例： 您可以单击左侧或右侧直到块移出视图。我怎么把它包含到它的容器？

，这里是我的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!'); 
}); 

Answer 1

只需添加一个有条件的动画：

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