jQuery アニメーションについての予備的な理解

jQuery アニメーション

Web プログラムを作成する場合、テキストやボタンをクリックしてプロンプトテキストを表示するなど、ポップアップレイヤーを使用することが必要になることがよくあります。次の要件があるとします。
画像の「プロンプトテキストを表示」ボタンをクリックすると、ボタンの下にポップアップレイヤーが表示されます。空白領域またはポップアップレイヤーをクリックすると、ポップアップレイヤーが消えます。

また、完了することもできますこれはオリジナルの JavaScript で動作します。次の点に注意してください:

1. ポップアップイベントをトリガーするオブジェクトはページ上のどこにでも表示される可能性があるため、ポップアップレイヤーの位置は動的に計算される必要があります。スクリーンショット内の位置など

2. クリックをドキュメントにバインドする関数は、複数のブロードキャストデリゲートを使用する必要があります。そうしないと、他の関数がバインドされている可能性があります。

3. close 関数をドキュメントにバインドした後、display 関数でイベントのバブリングをキャンセルする必要があります。そうしないと、ポップアップレイヤーが表示された直後に閉じられます。

この例は簡単に実装できます:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>jQuery - Start Animation</title>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {            //动画速度
            var speed = 500;            //绑定事件处理
            $("#btnShow").click(function(event)
            {                //取消事件冒泡
                event.stopPropagation();                //设置弹出层位置
                var offset = $(event.target).offset();
                $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });                //动画显示
                $("#divPop").show(speed);
            });            //单击空白区域隐藏弹出层
            $(document).click(function(event) { $("#divPop").hide(speed) });            //单击弹出层则自身隐藏
            $("#divPop").click(function(event) { $("#divPop").hide(speed) });
        });    </script></head><body>
    <div>
        <br /><br /><br />
        <button id="btnShow">显示提示文字</button>
    </div>
        
    <!-- 弹出层 -->
    <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;
        width: 300px; height: 100px;">
        <div style="text-align: center;">弹出层</div>
    </div>
    </body>
    </html>

基本的な表示機能と非表示機能の実装に加えて、ポップアップレイヤーの表示と非表示がグラデーションアニメーション効果になりました。jQuery のアニメーション関数はとてもシンプルです。プロジェクトで使ってみて意外だったのですが、以前はブラウザ間で位置を計算するのに苦労していましたが、jQueryのoffset()関数とheight()関数を使うことでポップアップレイヤーの位置を正確に計算できるようになりました。これらの関数はカプセル化されており、ブラウザ間で使用できます。ポップアップレイヤーの位置属性を設定するときに「px」を追加することに注意する必要があります。そうしないと、FireFox でのアニメーション関数は主に 3 つのカテゴリに分類されます。

基本的なアニメーション機能: 透明度グラデーションとスライド効果の両方を備えており、最も一般的に使用されるアニメーション効果機能です。スライドグラデーション効果のみを使用します。: 透明度グラデーション効果のみを使用します。

これら 3 種類のアニメーション関数の効果はすべて異なりますが、使い方は基本的に同じです。ご自身で試してみてください。次に、jQuery はカスタムアニメーション関数も提供しており、独自のアニメーション効果を定義できます

3 種類の組み込みアニメーション関数とカスタムアニメーション関数については、以下で個別に説明します。

学び続ける

新しいファイル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jQuery - Start Animation</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //动画速度 var speed = 500; //绑定事件处理 $("#btnShow").click(function(event) { //取消事件冒泡 event.stopPropagation(); //设置弹出层位置 var offset = $(event.target).offset(); $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); //动画显示 $("#divPop").show(speed); }); //单击空白区域隐藏弹出层 $(document).click(function(event) { $("#divPop").hide(speed) }); //单击弹出层则自身隐藏 $("#divPop").click(function(event) { $("#divPop").hide(speed) }); }); </script></head><body> <div> <br /><br /><br /> <button id="btnShow">显示提示文字</button> </div>  <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 300px; height: 100px;"> <div style="text-align: center;">弹出层</div> </div> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear