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/  .  属性ごとに効果を指定できます.
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