Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【jQueryを使ったエフェクトの正体】

f:id:wp-lesson:20170223110943j:plain

昨晩、WebデザイナーさんとjQueryのレッスンでした。
 
レスポンシブなサイトによくある、スマホメニューを
開いたり閉じたりする動作をjQueryで作成しました。
 
ボタンをタップするとメニューがふわっと表示され、
もう一度タップするとふわっと消えていくメニューです。
 
いわゆる「フェードイン」「フェードアウト」です。
 
jQueryを使えば、
 

↓フェードイン
$('.nav-toggle').fadeIn();
 
↓フェードアウト
$('.nav-toggle').fadeOut();

 
のように、これ以上ないというぐらい直感的にわかる
メソッド名を使って1行で書けてしまうのですが、
 
ディベロッパーツールで動作の様子を見てみると、
これらのメソッドの正体がわかります。
 
例えば fadeIn() は、デフォルトでは 400ミリ秒かけて
CSSのopacityプロパティを0⇒1へ連続的に変化させ、
変化が終わると同時に displayプロパティをblockに
切り替える動作をします。
 
逆に fadeOut() は、opacity を1⇒0へ連続的に変化させ、
変化が終わると同時に display を none に切り替える
動作をします。
 
ちなみに opacity は透明度を表すスタイルです。
displayは表示方法を表すスタイルで、block にすると
縦横の幅を持ったブロック要素として表示され、
noneにすると表示が消えます。
 
このことから何がわかるかというと、
たった1行唱えるだけでエフェクトが簡単に作れてしまうjQueryの正体は、
Javascriptを使ってCSSを連続的に変化させているだけだということです。
意味の分からない魔法のコードではありません。

昔から変わっていないHTMLとCSSの基本的な操作が、
1つの短いメソッドの中にあらかじめ組み込まれているだけなのです。

 
この本質が理解できていれば、
 
「ここはjQueryを使ったら楽に作れそうだな」
「ここはjQueryを使わなくてもCSSでいけそうだな」
 
といった、サイト制作やカスタマイズをするときの判断が
自分でできるようになり、自由度が広がります。
 
 

PR

CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
 
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
 
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
 
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら
http://amzn.to/2bXJkbs
 
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
 
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
 
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
実習と添削でHTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy