如何jQuery的動畫CSS左值到元素的寬度？

Question

我需要使用Jquery動畫函數將絕對div相對於其父項移動。如何限制一個CSS對象字面值left + = -600px，以便左邊的定位在到達寬度的末尾時停止？換句話說，我想限制元素的左側位置，使其不會離開頁面並離開視圖。感謝您的幫助

Answer 1

那麼你沒有提供任何代碼，所以我唯一的猜測是你誤解了jQuery的動畫函數的工作原理。其實jQuery的動畫功能正是你想要的。它會將你想要的元素的屬性增加到不超過你想要的值。也就是說，除非你願意，否則它不會將它從頁面中移出並且看不見。 Here有一個閱讀它是如何工作的。

Answer 2

$(this).animate({'left': '-'+$(this).parent().width()}, [time in ms]); 

或者，如果你的意思是元素自己的寬度：

$(this).animate({'left': '-'+$(this).width()}, [time in ms]); 

Answer 3

你可以使用jQuery的animate的step - 函數在每一步檢查元素是否已經到達頁面的邊緣，應該停止。 HERE是演示使用step功能在達到限制時停止動畫的小提琴。

...animate({left: '+=-600px'}, 
    { 
    ... , 
    step: function(now, fx) { 
     if (fx.now <= 0) { // If the current animation value is less than zero 
     $(fx.elem).stop(); 
     $(fx.elem).style('left', '0'); 
     } 
    } 
    ... 
    } 
); 

step函數爲您提供了一個很好的方法，可以根據需要逐步控制動畫。有關更多信息，請閱讀here。

Answer 4

爲了保持它在父一字排開，你需要從父寬度減去孩子寬度，像這樣：

$(document).ready(function(){ 
var childWidth = $('#child').width(); 
var parWidth = $('#child').parents('#parent').width(); 
var offSet = parWidth - childWidth; 

$('#child').animate({ 
    left: '+=' + offSet 
}, 1000); 

}); 

示例HTML：

<div id="parent"> 
    <div id="child"> 
     I've been a bad child. 
    </div>  
</div> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 
#parent { 
    width: 600px; 
    height: 200px; 
    background: green; 
    position: relative; 
} 

#child { 
    position: absolute; 
    background: red; 
    width: 100px; 
    height: 200px;   
} 

See this JSFiddle進行演示。