シンプルで強力なフロントエンドフレームワークjQueryの、アニメーションとジャンケンゲーム

それは何されるクエリ?

jQueryのは、一般的に使用される機能のためのJavaScriptコードをカプセル化したHTML文書の操作、イベント処理、アニメーションやAjaxのインタラクションの設計を最適化するために、簡単なJavaScriptのデザインパターンを提供し、高速で簡潔なJavaScriptフレームワークです。

これは、HTMLドキュメントの操作、イベント処理、アニメーションやAjaxのインタラクションの設計を最適化するために、簡単なJavaScriptのデザインパターンを提供し、一般的に使用される機能のためのJavaScriptコードをカプセル化します。

jQueryの効果 - 非表示と表示

.SHOW()隠された要素が表示されるようになっています。効果:また、要素の高さ、幅、不透明度の属性を変更

.hide()表示要素は隠され、その反対を示すように

.toggle()メソッドがhide()およびshow()メソッドを切り替えるために使用されます。隠された要素を表示し、表示された要素を非表示

14078400-405213f312aaa5eb.gif

シンプルで強力なフロントエンドフレームワークjQueryの、アニメーションとジャンケンゲーム

フォントファミリ:Consolas、メンロー、宅配便、モノスペース。フォントサイズ:16pxに;

ホワイトスペース:ノーマル; 色:RGB(34、34、34)。フォントスタイル:ノーマル; フォントバリアント-リガチャ:ノーマル;

フォントバリアントキャップ:ノーマル; フォント重量:ノーマル; 文字間隔:ノーマル;

孤児:2; テキスト整列:開始。テキストインデント:0PX。テキスト変換:なし。未亡人:2;

単語間隔:0PX。-webkit-テキストストローク幅:0PX。背景色:RGB(255、255、255); "> 1 <DOCTYPE HTML> 2345678 $(ドキュメント).ready(関数(){9 $(!" #隠す」()関数(){$ 10をクリックしてください。 ( "P"))(非表示; 11}); 12 $ {13 $( "P")を表示()( "#ショー"()関数を(クリック); 14}); 15}); 16171819

あなたは「隠す」ボタンをクリックすると、私は消えます。

隠されたディスプレイ20 21 2223

jQueryの効果 - フェード

.fadeIn()フェード表示の隠し要素ましょう

.fadeOut()表示素子を隠すフェードするように、透明度を変更します

。FadeToggle()メソッドは、フェードイン()。フェードアウト及び()メソッドとの間で切り替えることができます。要素が残っている場合、fadeToggle()は、要素にフェード効果を追加します。要素がフェードされる場合、fadeToggle()は、要素にフェードを追加します。

最終的に透過性を示す第2パラメータを受信fadeToggleと.fadeTo(時間、最終的な透明度関数)

14078400-b161f94cea87e614.gif

1 <!DOCTYPE htmlの> 2345678 $(ドキュメント).ready(関数(){9 $( "ボタン")をクリックします(関数(){10 $( "#のDIV1")fadeToggle();。。11 $( "# DIV2 ")fadeToggle(" 遅い "); 12 $(" #1 DIV3" )fadeToggle(3000); 13}); 14}); 15161718

例としては、fadeToggle()は、異なる速度(速度)パラメータを使用示します。

19クリックしてフェードイン/アウト20

2122
2324
252627

jQueryの効果 - スライド

.slideDown()隠された要素が表示されるように、効果は上から下で、高さを増加させます。

.slideUp()表示要素が隠れているので、効果は、高さを低減するために、下から上です。

。SlideToggle()メソッドは、slideDown()とslideUp()メソッドとの間で切り替えることができます。要素が下方に摺動する場合、slideToggle()が摺動可能に上向き。要素が上方にスライドされた場合、slideToggle()摺動可能に下方これら。

14078400-2176d5b77b040d66.gif

1 <!DOCTYPE HTML> 2345678#パネル、#フリップ

9 {

10パディング:5pxの;

11テキスト整列:センター。

12背景色:#1 e5eecc。

13国境:固体1pxの番号のc3c3c3。

14}

15 #panel

16 {

17パディング:は50px;

18ディスプレイ:なし。

19}

20 2122 $(ドキュメント).ready(関数(){23 $( "#フリップ")slideToggle()が "遅い"(関数(){24 $( "#パネル")をクリックして、.. 25}); 26} ); 2728293031私のポイント、パネルを表示または非表示にします。32Hello世界!3334

jQueryの効果-animate()メソッド

.animate({最終的なスタイル属性、オブジェクトキー}

アニメーションのイベント、

アニメーション( "線形"、 "スイング")、

)アニメーションコールバック関数の実装後

アニメーション注:

対象のパラメータは、キーがこぶのルールを使用する必要があります

アニメーションの唯一の属性値の型を使用することができ、非数値属性の種類は、アニメーション化することができません

14078400-e7184ff15b9a896e.gif

1 <!DOCTYPE htmlの> 2345678 $(ドキュメント).ready(関数(){$ 9( "ボタン")をクリックします(関数(){10vardiv = $( "DIV"); 11div.animate({左: '100pxに'}、 "遅い"); 12div.animate({のfontSize:' 3emは '}) "遅い"; 13}); 14}); 1516 171819开始动画20

デフォルトでは、すべてのHTML要素には、静的な位置を持っており、不動です。あなたが変更する必要がある場合は21、私たちは、要素の属性は、相対的な固定、または絶対で配置する必要があります!

22HELLO232425

14078400-2aaaf10c4ffa171f.gif

ます。https://www.jianshu.com/p/9deccb31fd19で再現

おすすめ

転載: blog.csdn.net/weixin_33712987/article/details/91206315