jQuery：使用動畫滑動文本的權利，但按百分比的div

Question

我是新來的jQuery，我試圖創建動畫的最基本的例子。目標是，使用div的百分比來包含文本，以便說明不同的屏幕尺寸（如果有意義的話）？

這裏是我開始與jQuery的：

$(document).ready(function() { 
    $('#exampleDiv').animate({'marginLeft': '+=125px'}, 2000); 
}); 

哪些工作，但沒有考慮到不同的屏幕尺寸。所以我想把它換成某種百分比。

我試過了：{padding-left:58%}和{left:58%}但這些對我來說不起作用，要麼是因爲我希望這是基於div，如果這有意義的話，它包含在內？所以我想了解如何將動畫值設置爲div容器的百分比。還有如何根據此設置字體大小。

<div id="container" width="300px" height="300px"> 
    <div id="exampleDiv">Text to slide in</div> 
</div> 

所以，再一次我剛學這個，如果有更好的方法，我歡迎並感謝大家的勸告，實例等

感謝一如既往！

Answer 1

正如Adeneo提到你可以使用％的CSS屬性，我在一個非常類似的方式來完成它。

jsfiddle

這抓起#container寬度，並將其存儲在一個變量，下面是用來工作了百分比：.width()/100 * 50;，改變* 50到你想要的任何數量的百分比是。

這有附加的功能，可以引用回它的其他元素，你可能想也風格。

Answer 2

jQUery動畫CSS屬性，所以動畫百分比不是問題，只要你設置正確的CSS值開始。

DEMONSTRATION