Jquery学習ノート——アニメーション
2265 ワード
参考資料 chapter 5/lab.effects.
jQueryはオブジェクトにいくつかの特殊効果を与えることができます.
ドル('h 1').show()//.h 1のタイトルを表示します.オプションパラメータはspeedとcalBackであり、speedは(String,Number):Stringは3つの所定速度の一つの文字列(「slow」,「normal」,or「fast」)であっても良いし、動画の長さを示すミリ秒値(例えば、1000)、calback(Functional):(Optional)はアニメーションの完成時に一回の関数とします.
常用する特殊効果は以下の通りです.
.fadeIn()フェードアウト
.fadeOut()フェードアウト
・fadeTo(speed,opacity,calback):指定された透明度に調整する
fadeTogle() 要素をフェードアウト、フェードアウトで切り替えます.
.hide()隠し要素
.ショー()表示要素
.toggle(switch) switchで判断すると、展示または非表示になります.
.slade Down()を下に展開する
.sledUp()を上に巻く
.sledToggle()展開またはロールアップ切り替え
.stop()と.delay()は、効果の実行を停止または遅延するために使用されます.
$fx.offがtrueに設定されている場合は、すべてのページの効果を無効にします.
show()とhide()を除いて、他の効果のデフォルト実行時間はすべて400 msですが、この設定を変更することができます.
ドル('h 1').fadeIn(300)/.300ミリ秒以内にフェードアウト
ドル('h 1').fadeOut('slow')//緩やかにフェードアウトする
効果が終了したら、実行する関数を指定できます.
ドル('p').fadeOut(300,function(){$
より複雑なエフェクトは、カスタムアニメーションを使用することができます.
Animate(properties、duration、easung、calBack):
propertiesは最終的に到達した状態オブジェクトで、+=5のような相対値を指定できます. -=4;指定された数値値の属性に限り、属性値の最初の数字以外にも、下記の文字列hide、show、togg leをサポートします.
easungは補間効果のために、Easing PluginやColor Animation Pluginなどのプラグインによって提供され、デフォルトはlinearとswingをサポートします.最後に加速します.
calBackアニメーションが完了したら関数を呼び出します.
注:1.4でEasing PluginをJquery.jsに統合し、直接にプラグイン効果を起動し、31の効果をサポートします. easuingOutQud easuingInOutQud easuingIn𞓜OutのCubic Quart Quint Sine Expo Circ Elastic Back Bounce ウィング とlinear、ウェブサイトを参照してください:http://gsgd.co.uk/sandbox/jquery/easing/ . 属性ごとに効果を指定できます.
Animate(properties、options) :
optionsサポートのプロパティ:duration、easung、complettee:アニメーションが完了したら関数を呼び出し、queue:falseの場合、アニメーションはキューに参加せずに実行を開始します.
例:
('div').animate(
{
left:「+=50」///「右に移動」
opacity:0.25/指定透明度
}
フェードアウトとフェードアウトの切り替えのように、$
300、//継続時間
function(){alert('done!')}//コールバック関数
)0
jQueryはオブジェクトにいくつかの特殊効果を与えることができます.
ドル('h 1').show()//.h 1のタイトルを表示します.オプションパラメータはspeedとcalBackであり、speedは(String,Number):Stringは3つの所定速度の一つの文字列(「slow」,「normal」,or「fast」)であっても良いし、動画の長さを示すミリ秒値(例えば、1000)、calback(Functional):(Optional)はアニメーションの完成時に一回の関数とします.
常用する特殊効果は以下の通りです.
.fadeIn()フェードアウト
.fadeOut()フェードアウト
・fadeTo(speed,opacity,calback):指定された透明度に調整する
fadeTogle() 要素をフェードアウト、フェードアウトで切り替えます.
.hide()隠し要素
.ショー()表示要素
.toggle(switch) switchで判断すると、展示または非表示になります.
.slade Down()を下に展開する
.sledUp()を上に巻く
.sledToggle()展開またはロールアップ切り替え
.stop()と.delay()は、効果の実行を停止または遅延するために使用されます.
$fx.offがtrueに設定されている場合は、すべてのページの効果を無効にします.
show()とhide()を除いて、他の効果のデフォルト実行時間はすべて400 msですが、この設定を変更することができます.
ドル('h 1').fadeIn(300)/.300ミリ秒以内にフェードアウト
ドル('h 1').fadeOut('slow')//緩やかにフェードアウトする
効果が終了したら、実行する関数を指定できます.
ドル('p').fadeOut(300,function(){$
より複雑なエフェクトは、カスタムアニメーションを使用することができます.
Animate(properties、duration、easung、calBack):
propertiesは最終的に到達した状態オブジェクトで、+=5のような相対値を指定できます. -=4;指定された数値値の属性に限り、属性値の最初の数字以外にも、下記の文字列hide、show、togg leをサポートします.
easungは補間効果のために、Easing PluginやColor Animation Pluginなどのプラグインによって提供され、デフォルトはlinearとswingをサポートします.最後に加速します.
calBackアニメーションが完了したら関数を呼び出します.
注:1.4でEasing PluginをJquery.jsに統合し、直接にプラグイン効果を起動し、31の効果をサポートします. easuingOutQud easuingInOutQud easuingIn𞓜OutのCubic Quart Quint Sine Expo Circ Elastic Back Bounce ウィング とlinear、ウェブサイトを参照してください:http://gsgd.co.uk/sandbox/jquery/easing/ . 属性ごとに効果を指定できます.
jQuery('#foo').animate({
left: 500,
top: [500, 'easeOutBounce']
}, 2000);
サポートAnimate(properties、options) :
optionsサポートのプロパティ:duration、easung、complettee:アニメーションが完了したら関数を呼び出し、queue:falseの場合、アニメーションはキューに参加せずに実行を開始します.
例:
('div').animate(
{
left:「+=50」///「右に移動」
opacity:0.25/指定透明度
}
フェードアウトとフェードアウトの切り替えのように、$
300、//継続時間
function(){alert('done!')}//コールバック関数
)0