jQueryアニメーションと特殊効果の詳しい解説_jquery

1. Hide() と show() の表示と非表示

アニメーションの場合、表示と非表示は最も基本的な効果の 1 つです。このセクションでは、jQuery の表示と非表示について簡単に紹介します。

コードをコピーします コードは次のとおりです:

$(function() {
$("input:first").click(function() {
$("p").hide() //非表示
});
$("input:last").click(function() {
​​​​​​​​​​​​​ });
});
                                                                                         

ボタンをクリックして効果を確認します

& Lt; div & gt; & lt; em & gt; このセクションでは、主に jQuery の自動非表示、徐々に入ってくるものを学習します。カスタムアニメーションなど1. 表示と非表示 Hide() と show() アニメーションの場合、表示と非表示は、jQuery の表示と非表示を簡単に紹介します。
                                                                                       


上記は、hide() 関数と show() 関数のテストです。

2. show()、hide()、および toggle() メソッドを使用します

前の例では、show() メソッドと Hide() メソッドを簡単に紹介しました。実際、これら 2 つのメソッドは、表示および非表示のプロセスを制御するパラメーターを受け入れることができます。
構文は次のとおりです

show(duration,[callback]);
Hide(期間,[コールバック]);

このうち、duration はアニメーションの実行時間の長さを表し、遅い、通常、速いなどの速度を表す文字列にすることができます。また、時間 (ミリ秒) を表す整数にすることもできます。 callback はオプションのコールバック関数です。アニメーションの完了後に実行されます。

コードをコピーします コードは次のとおりです:

$(function() {

$("input:first").click(function() {
$("p").hide(300) //隠す
; });
$("input:last").click(function() {
$("p").show(500) //Show
; });
});
                                                                                         


この例は最初の例と同じですが、時間パラメーターが Hide() と show() に追加される点が異なります。実際、toogle() はイベント パラメータを追加することもできます。

2. fadeIn() メソッドと fadeOut() メソッドを使用する

アニメーション効果に関して、jQuery は、fadeIn() と fadeOut という 2 つの実用的なメソッドも提供します。これらのアニメーション効果はフェーディングに似ており、その構文は、slow() および hide() とまったく同じです。
fadeIn(duration, [callback]);

fadeOut(duration, [callback]);

例

コードをコピー

コードは次のとおりです:

$(function() {
$("input:eq(0)").click(function() {
を通して });
$("input:eq(1)").click(function() {
$("img").fadeIn(1000) // 徐々にフェードイン
; });
});

">

fadeTo() メソッドの使用法。

fadeTo() メソッドは、選択した要素の不透明度を指定された値に徐々に変更します。

例:

コードをコピーします コードは次のとおりです:

$(function() {
$("input:eq(0)").click(function() {
$("img").fadeOut(1000);
});
$("input:eq(1)").click(function() {
$("img").fadeIn(1000);
});
$("input:eq(2)").click(function() {
$("img").fadeTo(1000, 0.5);
});
$("input:eq(3)").click(function() {
$("img").fadeTo(1000, 0);
});
});
                                                                                                                                                                                                                                                                     

フェードアウト関連パラメータ

速度 オプション。要素が現在の透明度から指定した透明度に変化する速度を指定します。

可能な値:

ミリ秒 (例: 1500)

「遅い」

「普通」

「速い」
不透明度が必要です。フェードインまたはフェードアウトする透明度を指定します。 0.00 ～ 1.00 の数値である必要があります。
コールバック
オプション。 fadeTo関数実行後に実行される関数。

コールバックの詳細については、jQuery コールバックの章をご覧ください。

このパラメータは速度パラメータが設定されていないと設定できません。

3. スライドの slideUp および slideDown エフェクト

コードをコピー コードは次のとおりです:

            $(function() {
                $("input:eq(0)").click(function() {
                    $("div").add("img").slideUp(1000);
                });
                $("input:eq(1)").click(function() {
                    $("div").add("img").slideDown(1000);
                });
                $("input:eq(2)").click(function() {
                    $("div").add("img").hide(1000);
                });
                $("input:eq(3)").click(function() {
                    $("div").add("img").show(1000);
                });
            });
        スクリプト> 
   
   
   
   

   

前にアニメーション エフェクトについて説明しましたが、jQuery では、PPT 内の幻灯片のスロット エフェクトに似た switchUp() と slideDown() も提供されており、slow() や Hide() と完全に同じです。

上記のコードは div と img を定義し、add メソッドを使用して組み合わせます。

4.自定义アニメーション画

フレームの汎用性とコード ファイルのサイズを考慮して、jQuery はすべてのアニメーション効果を網羅することはできませんが、公開者が独自にアニメーションを設定できるようにする animate() メソッドを提供しています。 2 つの形式および用途。

animate() メソッドは、公開者にとって非常に広い範囲に存在します。どちらも 2 つの形式に共通しています。最初の形式がよく使用されます。使用方法は次のとおりです。

animate(params,[duration],[イージング],[callback])

この中のparamsは、幻の実行を希望するcssプロパティのリストと、変更を希望する最終値であり、durationは選択可能であり、show()/hide()のパラメータと完全に同じ内容が含まれます。 jQuery では、リニアとスイングの 2 つの値のみが提供されます。コールバックは、アニメーションの完了後に実行されます。

注意が必要です。params 内の値は、cyclecamel 命名方式に従います。たとえば、paddingLeft は、padding-left を書き込むことはできません。また、params は、css で使用される数値で表示されるプロパティのみです。たとえば、width.top.opacity など。
背景色このようなプロパティはアニメーションではサポートされていません。

复制代码

代码如下:

            div {
                背景色: #FFFF00;
                高さ: 40px;
                幅: 80px;
                ボーダー: 1px ソリッド #000000;
                margin-top: 5px;
                パディング: 5px;
                text-align: 中央;
            }
       
       
            $(function() {
                $("ボタン").click(function() {
                    $("#ブロック").animate({
                        不透明度: "0.5"、
                        幅: "80%"、
                        高さ: "100px",
                        borderWidth: "5px",
                        フォントサイズ: "30px",
                        marginTop: "40px",
                        marginLeft: "20px"
                    }、2000);
                });
            });
       
        Go>>
       

アニメーション画！

では、jQuery は params で「=」または「-=」を使用して相対的な変化を表すこともできます。

复制代码代码如下:

            div {
                背景色: #FFFF00;
                高さ: 40px;
                幅: 80px;
                ボーダー: 1px ソリッド #000000;
                margin-top: 5px;
                パディング: 5px;
                text-align: 中央;
                位置: 絶対;
            }
       
       
            $(function() {
                $("button:first").click(function() {
                    $("#ブロック").animate({
                        left: "-=80px" // 相对左移
                    }, 300);
                });
                $("button:last").click(function() {
                    $("#ブロック").animate({
                        左: " =80px" // 相对右移
                    }, 300);
                });
            });
       
        移動>>ボタン>
        移動>>ボタン>
       

アニメーション画！

まず div で完全な位置を設定し、animate() 内の -= と = を使用してそれぞれ相対左移動と相対右移動を実行します。

animate() メソッドには、以下に示すような別の形式もあります:

animate(params,options)

ここで、params は最初の形式と完全に同じで、オプションはアニメーションの選択可能なパラメータ列表であり、主にduration、esaing、callback、queueなどが含まれます。その中でduration.easing.callbackは最初の形式と完全に一致し、queueは布尔值で表示されます。複数の animate() が jQuery に含まれている場合、現在の animate() は次の animate() を受け取り、これは按顺序実行(true) であり、同時に接触 false

次の例のように、animate() の 2 番目の使用法を示します。

复制代码代码如下:

div {
背景色: #FFFF22;
幅: 100px;
text-align: center;
枠線: 2 ピクセルの実線 #000000;
マージン: 3px;
font-size: 13px;
フォントファミリー: Arial、Helvetica、サンセリフ;
}
入力 {
枠線: 1 ピクセルの実線 #000033;
}
                                                                                     
       
       
       
       
       

ブロック1

       

ブロック2

上の 2 つの div ブロックは同時に 3 つのアニメーション エフェクトを使用しており、最初の div の最初のアニメーションには queue:false パラメータが追加されており、前の 2 つのアニメーションが同時に実行されるようになります。 ，熟すべてanimate()の第二の形式。

以上が本書のすべての内容です。