向左跳出jQuery動畫會跳出屏幕

使用以下功能，我可以在左側爲動畫製作一個div，但問題在於，div離開了屏幕區域。無論如何，我可以保持#mydiv僅在#container左側？如果#mydiv已經在左側，那麼它應該什麼也不做。向左跳出jQuery動畫會跳出屏幕

$('.left').click(function() { 
     $('#myDiv').animate({ 
      left: '-=30' 
      }, 400, function() { 
      // callBack 
    });

HTML：

<div id="container"> 
     <a class="left" href="#">Left</a> 
    </div>

來源

2012-08-08 user1355300

爲了獲得這種你好編輯來驗證您要移動的div至少位於#container的left一側的30px。

$('.left').click(function() { 
if (parseInt($('#myDiv').css('left')) >= 30) {  
    $('#myDiv').animate({ 
     left: '-=30' 
     }, 400, function() { 
     // callBack 
    }); 

    } 
});

例如：http://jsfiddle.net/X2TdJ/1/

如果您#container將定位到你身體左側marginLeft不會停走你的#container股利之外。

這裏的示例：http://jsfiddle.net/DAEsX/1/

來源

2012-08-08 12:14:19

謝謝，你的回答很有幫助，但我試圖添加另一個鏈接滾動到右側，然後它不起作用。你可以請看看這個：http://jsfiddle.net/X2TdJ/3/ – user1355300 2012-08-08 12:51:25

這是你想獲得的原始代碼[http://jsfiddle.net/X2TdJ/5/](http： //jsfiddle.net/X2TdJ/5/）。它完成這項工作，但它需要大量的重構。 – 2012-08-08 13:20:13

你可以嘗試margin-left: -30px;代替。

來源

2012-08-08 11:50:41 StuartM

要在容器區域限制，你可以嘗試：

$('.left').click(function() { 
    if($('#myDiv').offset().left != 0){ //could be >= 0 
     $('#myDiv').animate({ 
      marginLeft: '-=30' 
      }, 400); 
    }else{ 
     console.log('left - 0'); 
    } 
});

CSS：

#myDiv{ 
    width: 300px; 
    height: 200px; 
    background: red; 
    margin-left: 150px; 
}

HTML：

<div id="container"> 
    <a class="left" href="#">Left</a> 
    <div id="myDiv"></div> 
</div>

EXAMPLE

來源

2012-08-08 11:56:28

謝謝，但它不起作用。它的行爲方式相同。 – user1355300 2012-08-08 12:04:18

@ user1355300小提琴似乎適合我，因爲邊距是30的倍數，如果不是，您可以在偏移量中嘗試> = 0。 – 2012-08-08 12:07:50

向左跳出jQuery動畫會跳出屏幕

回答

相關問題