jquery でのアニメーションに関するチュートリアルの例

jQueryアニメーション

1. 左上隅のズーム効果

hide([speed,[fn]])

概要: 表示されている要素を非表示にする

パラメータ: Speed: 3つのあらかじめ決められた速度のいずれかの文字列("遅い "、"標準"、または "速い")、またはアニメーションの継続時間を示すミリ秒の値 (例: 1000)

fn: アニメーションの完了時に実行される関数。要素ごとに 1 回実行されます。

// $(":button[value=hide]").click(function(){
// $("div").hide(2000,function(){
//alert("div は非表示です");
// });
// })

show([speed,[fn]])

概要: 非表示の一致要素を表示します。

// $(":button[value=show]").click(function(){
// $("div").show(2000,function(){
// alter("div が表示されます) ");
// });
// })

toggle([speed],[fn])

概要: 要素が表示されている場合は非表示に切り替え、要素が非表示の場合は表示に切り替えます。 。

// //toggle([speed],[fn]) 要素が表示されている場合は非表示に切り替え、要素が非表示の場合は表示に切り替えます
// $(":button[value=hidden) ]" ).click(function(){
// $("div").toggle(2000);
// })

2. 上下のスケーリング効果

slideUp(speed, [callback ] )

概要: 高さの変更 (上向きに減少) を通じて、一致するすべての要素を動的に非表示にし、非表示の完了後にオプションでコールバック関数をトリガーします。

パラメータ：speed あらかじめ決められた3つの速度（「遅い」、「普通」、「速い」）のうちの1つの文字列、またはアニメーションの継続時間を示すミリ秒の値（例：1000） アニメーションの実行時に実行されるコールバック（オプション）関数

//slideUp(speed, [fn]) は、高さの変更 (上向きに減少) を通じて、一致するすべての要素を動的に非表示にし、オプションで、非表示が完了した後にコールバック関数をトリガーします
// $(":button [value=hidden] ").click(function(){
// $("div").slideUp(2000);
// })

slideDown(speed, [callback])

概要：高さによる変更（下に増加）一致するすべての要素を動的に表示し、オプションで表示完了後にコールバック関数をトリガーします。

// //slideDown(speed, [fn]) は、高さの変更 (下方向に増加) を通じてすべての一致する要素を動的に表示し、表示の完了後にオプションでコールバック関数をトリガーします
// $(": button[value=display ]").click(function(){
// $("div").slideDown(2000);
// })

slideToggle([speed],[fn])
概要: すべての表示/非表示を切り替えます高さの変更によって要素を照合し、オプションで切り替えが完了したときにコールバック関数をトリガーします。

//slideToggle([speed],[fn]) 高さの変更によって一致するすべての要素の表示を切り替え、オプションで切り替え完了後にコールバック関数をトリガーします
// $(":button[value=hidden Display] ").click(function(){
// $("div").slideToggle(2000);
// })

3. フェード効果 (不透明度の変更)

fadeOut(speed, [callback])

概要: 不透明度の変更を通じて、一致するすべての要素のフェードアウト効果を実現し、アニメーションの完了後にオプションでコールバック関数をトリガーします。

// $(":button[value=hide]").click(function(){
// $("div").fadeOut(2000);
// })

fadeIn(speed, [ callback])

概要: 不透明度の変更を通じて、一致するすべての要素のフェードイン効果を実現し、オプションでアニメーションの完了後にコールバック関数をトリガーします。

$(":button[value=display]").click(function(){
// $("div").fadeIn(2000);
// })

fadeToggle([speed,[fn ]])

概要: 不透明度の変更を通じて、一致するすべての要素のフェードイン効果とフェードアウト効果を切り替え、オプションでアニメーションの完了後にコールバック関数をトリガーします。

$(":button[value=hidden]").click(function(){
// $("div").fadeToggle(2000);
// })

fadeTo(speed,opacity, [ fn])

概要: 一致するすべての要素の不透明度を指定された不透明度に段階的に調整し、アニメーションの完了後にオプションでコールバック関数をトリガーします。

// $(":button[value=hide]").click(function(){
// $("div").fadeTo(2000,0.5);
// })

4. カスタムアニメーション

animate(params,[speed],[fn])

概要：カスタムアニメーションを作成するために使用する関数です。

// $("div").animate({"left":"1000px"},2000);

stop([clearQueue], [gotoEnd])

概要: 指定された要素上のすべてを停止します走るアニメーション。

パラメータ：clearQueue（オプション） trueに設定するとキューがクリアされます。アニメーションはすぐに終了できます。 (GOTOEND (オプション) を使用すると、現在実行されているアニメーションを即座に完了できます。

// $(document).click(function(){

// $("div").stop()

// })

delay(duration)

概要: キュー内の後続のアイテムの実行を延期する遅延を設定します。

パラメータ持続時間遅延時間、単位:ミリ秒

// $("div").lay(2000).animate({"left":"1000px"},2000);

以上がjquery でのアニメーションに関するチュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。