jquery - 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>

因此，我再次学习这一点，如果有更好的方法，我欢迎并感谢所有建议、示例等。

一如既往的感谢！

score 3 · Accepted Answer

jQUery 对 CSS 属性进行动画处理，因此只要您设置正确的 CSS 值，动画百分比就不是问题。

score 2 · Accepted Answer

正如 Adeneo 提到的，您可以将 % 用于 CSS 属性，我以非常相似的方式完成了它。

这将获取的宽度#container，将其存储在变量中，然后使用以下内容计算百分比：.width() / 100 * 50;，更改* 50为您希望百分比为的任何数字。

这具有附加功能，可以参考它以获取您可能还想要设置样式的其他元素。

2 回答 2