exercises004
下記の問題を区切り線以下のソースにjQueryを使用して操作してください。
このindex.html及び、style.cssは書き変えないこと。
jQueryのコードはscript.jsに記入すること。
指定された要素のみに操作できるようなコードを書くこと
- 問題１
-
２つのボタンを押すとそれぞれ下記のような動作となります。
- 画像を消しますボタン
- 画像が消えます。ボタンの表示が、「消えました。」に変更されます。
- 画像を表示させますボタン
- 画像が表示されます。ボタンの表示が、「表示されました。」に変更されます。
- 問題2
- 区切り線以下のリストで定義されている画像を横並びにさせてください。（style.css内にクラスclearfixとフロート用のflLを用意しています。）
- 画像にマウスを乗せると半透明になる。(問題２の画像のみに適用させてください。)
- 問題3
- テキストボックスなどにフォーカスが当たったときに、クラスBshadowが適用されるようにしてください。
- 送信ボタンを押すと < a class="alertBox" > 送信完了しました。ありがとうございます。< /a > を form要素の中に生成してください。
- 生成した要素はスライドダウンで表示をして、3秒後にフェードアウトするようにしてください。
- フェードアウトする前に生成した要素をクリックすると、アニメーションを止めてフェードアウトしてください。
- ●3秒待たせるメソッド
- .delay(3000)
- ●アニメーションを途中で止めるメソッド
- .stop(true)
- ●.click()メソッドにはreturn falseを入れておくいてください。
-
jQueryObject.click(function(){ -処理- return false; });
- 問題4
- 下記のページトップへのリンクにjQuery Easing pluginを利用したページトップアニメーションを付けてください。
- プラグインは準備してあります。
- クリックイベント内の記述は下記の通り
-
$("html,body").animate({ 'scrollTop':0 },900,'easeInOutExpo'); return false;
EasingプラグインはjQueryのアニメーションのｅａｓｉｎｇ機能を拡張するプラグインです。animate()メソッドの第３引数へプラグインで用意してある値を記述することで豊かなeasing処理が可能です。
各値はhttp://gsgd.co.uk/sandbox/jquery/easing/を参考下さい。