この「.hoge2C」を「クリックした時」に「隠す(hide)」するにはどういうコードを書けば良いでしょうか。class=&quot;hoge2D&quot;&gt;クリックするとフェードアウト&lt;/div&gt;サンプル2Cで書いたコードですが、「.hide()」を「.fadeOut()」というエフェクトメソッドに変更すると、更にリッチな表現が出来るようになります。.fadeOut()は、要素をゆっくりフェードアウトしてくれるメソッドです。コードはこんな感じになります。//サンプル2D$(function(){$(&quot;.hoge2D&quot;).click(function(){$(this).fadeOut(2000)});});.fadeOut()の括弧内には、要素がどれくらいでフェードアウトするのかを記述することができます。ここでは2000(単位はミリ秒=1/1000秒)という数値を入れましたので、.hoge2Dをクリックすると2秒かけて要素がフェードアウトする、と言うことになります。括弧内に数値を入力する時にはダブルクォテーションは必要ありませんので覚えておきましょう!デモページ他の要素を変化させるさぁ、いよいよ講座も終盤です。一息がんばりましょう!俺!今度は、イベントの起因となったセレクタ以外のセレクタを変化させてみましょう。class=&quot;red&quot;&gt;&amp;nbsp;&lt;/div&gt;CSS.hoge3A{float:left;width:470px;}.red{float:right;width:250px;height:100px;background:#FC9;display:table-cell;vertical-align:middle;color:#FFF;}(CSSは関係のない部分を削ってます)「.hoge3A」を「mouseover(マウスオーバーさせた時)」に「.red」の色を赤くさせる、そんなjQueryのコードを書くと以下のようになります。//サンプル3A'$(function(){$(&quot;.hoge3A&quot;).mouseover(function(){$(&quot;.red&quot;).css(&quot;background&quot;,&quot;red&quot;),});});thisを使用していた時と考え方は一緒ですね。mouseoverの後に来るセレクタに「.red」を指定してあげれば良いわけです。ここでちょっとアレンジを加えてみます。上のコードですと一度マウスオーバーしてしまうと色が赤のままですので、マウスアウトした際には色が戻るような記述を加えてみます。こんな時に便利なのが「.hover()」というイベントメソッド。toggleメソッドと同じような書き方で、マウスオーバー時の挙動とマウスアウト時の挙動をまとめて記述することができます。//サンプル3A$(function(){$(&quot;.hoge3A&quot;).hover(//マウスオーバー時の処理function(){$(&quot;.red&quot;).css(&quot;background&quot;,&quot;red&quot;)},//マウスアウト時の処理function(){$(&quot;.red&quot;).css(&quot;background&quot;,&quot;#FC9&quot;)});});コードはこうなりますね!メソッドチェーン更にアレンジ。もどるよ!」と言うテキストを入れてあげることにします。要素内のテキストを置き換えるには.text()というメソッドを使用します。もどるよ!")の部分。このように命令を繋げる場合には上のようにメソッドをドットで区切って続けて記述する事ができます。これをメソッドチェーンと言いますので是非覚えておきましょう。class=&quot;hogehoge&quot;&gt;&amp;nbsp;&lt;/div&gt;.hoge3B{float:left;width:470px;}.hogehoge{float:right;width:250px;height:100px;background:#4798bd;display:table-cell;vertical-align:middle;color:#FFF;}さぁいよいよ最後のサンプルです!今までの知識を総動員して、「.hoge3B」をクリックする度(toggle)に「.hogehoge」が「スライドアップ(slideUp=要素がスライドしながら消える)」と「スライドダウン(slideDown=要素がスライドしながら現れる)」を繰り返すようなコードを書いてみましょう!講座の復習をしたい!と言う人は是非挑戦してみてください:)//サンプル3B$(function(){$(&quot;.hoge3B&quot;).toggle(function(){$(&quot;.hogehoge&quot;).slideUp()},function(){$(&quot;.hogehoge&quot;).slideDown()});});答えはこちら!どうです?おわかりになりましたか?ちなみにデモページでは.slideUp("slow")と.slideDown("fast")と言うように、速度に強弱をつけております。実際の動きをご覧になってその違いを確かめてみてください:)デモページと、言うわけでいかがでしたでしょうか、「jQueryが全く分からない人のため」の超初級者向け入門講座でした。正直なところを言えば私、人に教えられるほどまだまだjQueryを修めていないというのが事実なのですが、それでもこんなに長々と書いたのは「jQueryってなんだか難しそう...」と思っている方に、jQueryに触れていただきたかったのです。言えば、約半年前の自分自身に向けた記事ともいえます。実際にコードを書いてみてそれが動いた時の感動はなんとも言い表せないものがありますし、Javascriptの綴りすらかけなかった私ですら、こんな風にコードを書けるようになったわけで。その楽しみを知っていただきたかったのです。親しんでくれるといいなーと思って書きました↑私がすっ飛ばしにすっ飛ばした部分を、事細かに説明してくださっているWebデザインレシピさんの記事。その内容は圧巻の一言です。今記事執筆にも大変参考にさせていただきました。Webクリエイターボックス↑数行のコードで実装できるjQueryの小ワザを説明とともに記してくださっているWebクリエイターボックスさんの記事。サンプルコードが丁寧な解説とともに多数収められており、実用度120%。私も常に愛読しております:)当ブログでのjQueryに関する記事OZPAの表4内でのjQueryに関する記事をいくつかピックアップしてみました。今講座を理解していただいた方のちょうど良いステップかと思います。jQueryを使用してhover時の画像にドロップシャドウがつくようにしてみた最後に本講座で使用したhtmlとcss、jsのコードをまとめてみましたので、是非持ち帰って勉強したいと言う方がいらっしゃいましたら↓からDLしてください。CDNを読み込んでいるので、ローカルで動かしたいと言う場合は各自jQueryのダウンロードページからどうぞ。OZPA名前:OZPA(おつぱ)東京在住・デザイン会社勤務のブロガー。1984年1月1日生まれ。