Question

我是jQuery的新手，我正在尝试创建最基本的动画示例。目的是，使用div的百分比，文本包含在内，以便在有意义的情况下考虑不同的屏幕尺寸？

这是我开始使用的jQuery：

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

哪个有效，但不考虑不同的屏幕尺寸。所以我想把它换成一个百分比。

我尝试过：{padding-left:58%}和{left:58%}但是这些对我来说也不起作用，因为我希望这个基于div，如果有意义的话，它包含在内？所以我想学习如何将animate值基于div容器的百分比。以及如何基于此设置字体大小。

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

所以我再次学习这个，如果有更好的方法，我欢迎并感谢所有建议，例子等。

一如既往地谢谢！

Answer 1

jquery为CSS属性设置动画，因此只要您设置正确的CSS值，动画百分比就不是问题。

Answer 2

正如Adeneo所说，你可以使用％作为CSS属性，我已经以非常类似的方式完成了它。

这会抓取#container的宽度，将其存储在变量中，然后使用以下内容计算出百分比：.width() / 100 * 50;，将* 50更改为您想要的百分比数字是

这具有额外的功能，能够将其引用回其他您可能想要设计样式的元素。