如何保持 <div> 里面的标签 <div> 在jQuery中移动时

Question

我有保持一个问题<div>里面<div> 其中一个动作，但是如果走得太远，它就会超出大页面和页面的范围。 我正在使用Jquery为<div>设置动画。 注意：小<div>水平移动。

属性：
大<div> ：
宽度：600像素

#truck是小<div> 。

我的代码（jQuery）：

     function moveRight(){
     $('#truck').animate({
     'marginLeft' : "+=3px"
     });
     }
     function moveLeft(){
     $('#truck').animate({
     'marginLeft' : "-=3px" 
     });
     }//later code<br>
     window.addEventListener('keydown', function(evt){
     var key = evt.keyCode;
     if( key == 39){
     moveRight() = true;
     moveLeft() = false;
     }
     if( key == 37){
     moveLeft() = true;
     moveRight() = false;
     }

     }, false); 

请帮忙！ 没有jsfiddle，但我有Google API jQuery。

Answer 1

如果不查看HTML和CSS，将无法给出确切的答案。 但是我认为

'marginLeft' : "-=3px"

执行此行时，如果margin-left的值得到负值，则inner <div>将超出外部<div>的范围。

当执行以下行时，可能会发生相同的事情，

'marginLeft' : "+=3px

如果左边距的值大于外部<div>的宽度，则即使内部<div>也会超出外部<div>的范围

Answer 2

您可以检查truck的margin-left是否小于零或超出集装箱的宽度。

 function moveRight() { var left = $('#truck').css("marginLeft").match(/\\d+/g); if (left < 320) { $('#truck').animate({ 'marginLeft': "+=80px" }); } } function moveLeft() { var left = $('#truck').css("marginLeft").match(/\\d+/g); if (left >= 80) { $('#truck').animate({ 'marginLeft': "-=80px" }); } } //later code<br> window.addEventListener('keydown', function(evt) { var key = evt.keyCode; if (key == 39) { moveRight() = true; moveLeft() = false; } if (key == 37) { moveLeft() = true; moveRight() = false; } }, false); 

 #container { width: 400px; height: 40px; border: 1px solid black; } #truck { margin-left: 0px; width: 80px; height: 40px; background-color: #AAA; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div id="container"> <div id="truck"></div> </div>