jquery - jQuery：アニメーションを使用してテキストを右にスライドさせますが、divの割合で

Question

私は jQuery が初めてで、アニメーションの最も基本的な例を作成しようとしています。目的は、テキストが含まれる div のパーセンテージを使用して、さまざまな画面サイズを考慮に入れることです。

これが私が始めたjQueryです：

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

これは機能しますが、さまざまな画面サイズを考慮していません。だから私はそれをパーセンテージベースのものに切り替えたかったのです。

私は試しました:しかし{padding-left:58%}、{left:58%}これらは私にとってはうまくいきません。だから、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