jQueryを使用して段落要素をアニメーション化する方法-jsチュートリアル-php.cn

jQueryを使用して段落要素をアニメーション化する方法

藏色散人

リリース： 2021-08-27 11:40:43

オリジナル

1720 人が閲覧しました

前回の記事「jQueryで要素にクリックイベントとダブルクリックイベントを追加する方法」では、jQueryを使って要素にクリックイベントとダブルクリックイベントを追加する方法を紹介しました。 . Friends who need it can learn. Learn about it~

この記事の主な内容は、jQuery を使用して段落要素をアニメーション化する方法を紹介することです。

そこで、この記事では、jQuery を使用してボタンをクリックして段落要素をアニメーション化し、主に animate() メソッドを使用してアニメーション効果を実現します。 animate() メソッドは、CSS スタイルで要素の状態を変更するために使用されます。このメソッドは、CSS プロパティを変更して、選択した要素をアニメーション化するために使用することもできます。

コードに直接進みましょう:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#GFG").animate({
                    opacity: 0.5,
                    fontSize: "3em",
                }, 1000);
            });
        });
    </script>
</head>

<body style="text-align: center;">
<h1 style="color: #ff311f;">
    PHP中文网
</h1>

<h3>
    如何用jQuery为段落元素设置动画？
</h3>

<p id="GFG">
    PHP中文网是你最佳的学习平台！
</p>

<button>点击这里！</button>
</body>
</html>

ログイン後にコピー

結果は次のとおりです:

GIF 2021-8-27 星期五上午 11-33-41.gif

誰もが必要とするものここでマスターするのは、animate()メソッド:

animate() メソッドは、CSS プロパティセットのカスタムアニメーションを実行します。このメソッドは、CSS スタイルを使用して要素をある状態から別の状態に変更します。 CSS プロパティの値が徐々に変化し、アニメーション効果を作成できます。アニメーション化できるのは数値のみです（例：「margin:30px」）。文字列値はアニメーション化できません（「background-color:red」など）。

→注: 相対アニメーションを作成するには、「」または「-=」を使用してください。

animate() の構文は次のとおりです:

(selector).animate({styles},speed,easing,callback)

ログイン後にコピー

パラメータスタイルが必要です: アニメーション効果を生成する 1 つ以上の CSS プロパティ/値を指定します。

注: animate() メソッドで使用する場合、プロパティ名はキャメルケースである必要があります。padding-left の代わりにpaddingLeft、margin-right の代わりにmarginRightなどを使用する必要があります。

パラメータspeedはオプションです。アニメーションの速度を指定します。

可能な値:

ミリ秒
「遅い」
## 「速い」 "

イージングパラメータはオプションです。アニメーション内のさまざまなポイントでの要素の速度を指定します。デフォルト値は「スイング」です。

可能な値:

「スイング」 - 開始/終了ではゆっくりと、中間ではより速く動きます
" 「linear」 - 一定の速度で移動

# ヒント: 拡張プラグインでは、さらに利用可能なイージング関数が提供されています。

コールバックパラメータはオプションです。animate 関数の実行後に実行される関数です。

最後に、「

JavaScript Basics Tutorial」「jquery Video Tutorial」をおすすめします～皆さんもぜひ学んでください～

以上がjQueryを使用して段落要素をアニメーション化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。