jQueryのUIの例 - 特殊効果（エフェクト）2024 年の最新の入門チュートリアル。このコースでは .effect（）デモ,イージングデモ, について学習できます。
アニメーション効果の要素の応用。
詳細については.effect()メソッドの詳細については、APIドキュメントを参照してください）（.effectを 。
効果をプレビューするには、ボタンをクリックしてください。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIエフェクト - .effect（）デモ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.toggler {幅：500pxなど;高さ：200pxの;位置：相対;}
#button {パディング：.5em 1EM;テキスト装飾：なし;}
#effect {幅：240ピクセル;高さ：135px;パディング：0.4em;位置：相対;}
#effect H3 {マージン：0;パディング：0.4em;テキスト整列：センター;}
.ui-効果-転送{ボーダー：2PX点線の灰色;}
</スタイル>
<スクリプト>
$（関数（）{
// {）（現在選ばれているエフェクト機能runEffectを実行します。
//）は（.valエフェクトタイプVAR selectedEffect = $（ "#effectTypes」）を求めよ。
//効果のほとんどは、= {}デフォルトの配信オプションのvarオプションを入力する必要はありません。
//必要なパラメータを持ついくつかの特殊効果の場合（selectedEffect === "スケール"）{
オプション= {パーセント：0};
}エルス（selectedEffect ===「転送」）の場合{
オプション= {へ：「#button」、クラス名：「UI-効果-転送 "};
}エルス（selectedEffect ===「サイズ」）の場合{
オプション= {へ：{幅：200、高さ：60}};
}
//実行の効果$（ "#effect」）.effect（selectedEffect、オプション、500、コールバック）;
};
//コールバック関数コールバック（）{
setTimeoutメソッド（関数（）{
$（ "#effect」）.removeAttr（「スタイル」）.hide（）フェードイン（）;
}、1000）;
};
//選択したメニューの効果$（ "#button"）.click（関数（）{に応じた値を設定します
runEffect（）。
falseを返します。
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVクラス= "トグラー">
<DIV ID = "効果"クラス= "UIウィジェットコンテンツUI-コーナー-すべて">
<H3クラス= "UIウィジェットヘッダUI-コーナー-すべて">特殊効果（エフェクト）</ H3>
<P>
Etiamリベロnequeは、Loremの。セッドpede。NULLAのLoremののmetus、adipiscing UT、sedのluctus、hendrerit履歴書、マイルでゼンパー、eleifend NECをluctus。
</ P>
</ DIV>
</ DIV>
<選択名= "効果" ID = "effectTypes">
<オプション値= "ブラインド">シェード・エフェクト（ブラインド効果）</オプション>
<オプション値= "バウンス">効果（バウンス効果）リバウンド</オプション>
<オプション値= "クリップ">クリップエフェクト（クリップエフェクト）</オプション>
<オプション値= "ドロップ">ランディング効果（ドロップエフェクト）</オプション>
<オプション値= "爆発">爆発エフェクト（効果を爆発）</オプション>
<オプション値= "フェード">フェード効果（フェード効果）</オプション>
<オプション値= "倍">折りたたみ効果（エフェクトを折る）</オプション>
<オプション値= "ハイライト">ハイライト効果（エフェクトを選んで）</オプション>
<オプション値= "パフ">膨張効果（パフ効果）</オプション>
<オプション値= "脈動">効果（脈動効果）を破っ</オプション>
<オプション値= "スケール">ズーム効果（寸法効果）</オプション>
<オプション値= "振る">振動効果（シェイク効果）</オプション>
<オプション値= "サイズ">サイズ・エフェクト（サイズ効果）</オプション>
<オプション値= "スライド">スライド効果（エフェクトをスライド）</オプション>
<オプション値= "転送">移動効果（移動効果）</オプション>
</選択>
<a href="#" id="button" class="ui-state-default ui-corner-all">実行影響します</a>
</ BODY>
</ HTML>
この例では、jQueryのUIが提供するすべてのイージングを描く、HTMLキャンバス要素を使用しています。 イージング動作を確認するために、各地図をクリックして。 。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIエフェクト - イージングデモ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.graph {
フロート：左;
margin-left：10pxの;
}
</スタイル>
<スクリプト>
$（関数（）{
場合（！$（ "<キャンバス>"）[0] .getContext）{
$（ "<DIV>"）の.text（
「キャンバスをサポートしていませんあなたのブラウザは、これはブラウザでキャンバスをサポートする必要性を示しています。」
）.appendTo（「#graphs "）;
返します。
}
VAR I = 0、
幅= 100、
高さ= 100;
$ .each（$の.easing、関数（名前、独自の実装）{
VARグラフ= $（ "の<div>"）.addClass（「グラフ」）.appendTo（「#graphs "）、
テキスト= $（ "の<div>"）の.text（++ iは+ "。" +名）.appendTo（グラフ）、
ラップ= $（ "の<div>"）.appendTo（グラフ）の.css（ 'オーバーフロー'、 '隠されました'）、
キャンバス= $（ "<キャンバス>"）.appendTo（ラップ）[0];
canvas.width =幅;
canvas.height =高さ;
VAR drawHeight =高さ* 0.8、
cradius = 10。
CTX = canvas.getContext（「2D」）。
ctx.fillStyle = "黒"。
//背景ctx.beginPath（）を描きます。
ctx.moveTo（cradius、0）;
ctx.quadraticCurveTo（0、0、0、cradius）。
ctx.lineTo（0、高さ - cradius）。
ctx.quadraticCurveTo（0、高さ、cradius、高さ）;
ctx.lineTo（幅 - cradius、高さ）;
ctx.quadraticCurveTo（幅、高さ、幅、高さ - cradius）。
ctx.lineTo（幅、0）。
ctx.lineTo（cradius、0）;
ctx.fill（）。
//ボトムラインctx.strokeStyle = "＃555"を描きます。
ctx.beginPath（）。
ctx.moveTo（幅* 0.1、drawHeight + 0.5）;
ctx.lineTo（幅* 0.9、drawHeight + 0.5）;
ctx.stroke（）。
//一番上の行ctx.strokeStyle = "＃555"を描きます。
ctx.beginPath（）。
ctx.moveTo（幅* 0.1、drawHeight * 0.3から0.5）。
ctx.lineTo（幅* 0.9、drawHeight * 0.3から0.5）。
ctx.stroke（）。
//は緩和ドロー
ctx.strokeStyle = "白"。
ctx.beginPath（）。
ctx.lineWidth = 2。
ctx.moveTo（幅* 0.1、drawHeight）。
の$ .each（新しいアレイ（幅）、機能（位置）{
VAR状態=位置/幅、
ヴァル= IMPL（状態、位置、0、1、幅）。
0.1 * 0.8 +幅ctx.lineTo（位置、
drawHeight - drawHeight *ヴァル* 0.7）;
}）;
ctx.stroke（）。
//動的にクリックのgraph.click（関数を（）{変更
ラップ
.animate（{高さ：「隠す」}、2000年、名）
.delay（800）
.animate（{身長： "ショー"}、2000年、名）;
}）;
graph.width（幅）.height（高さ+ text.height（）+ 10）;
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "グラフ"> </ div>の
</ BODY>
</ HTML>