jQueryを使ったシンプルなスライドショーの1回目はフェードイン・フェードアウトのみ(全3回)
- 2014/10/21
先週、授業中にやったjQueryを使ったシンプルなスライドショーです。
スライドショーは3週に分けて少しずつバーションアップしていきます。
先週、授業中にやったjQueryを使ったシンプルなスライドショーです。
スライドショーは3週に分けて少しずつバーションアップしていきます。
少し前にjQueryプラグインを使わずに文字や画像のオブジェクトを動かす方法を紹介しましたが、今回はランダム要素を排除した別バーションです。
吹き出しなどに使えるかも!
今日のテクニカルWebデザイン(TechWeb)の授業でやった内容の復習です。
jQueryプラグインを使わずに文字や画像のオブジェクトを動かす方法を紹介します。
jQueryのanimate()メソッドを使えば文字や画像などのオブジェクトを簡単に動かしてアニメーションさせることができます。この animate()メソッドは奥が深くて、オプションを指定することで動作をカスタマイズすることができます。
アコーディオン式のメニューやクリックで表示されるコンテンツなど様々な場所で応用可能なアコーディオンをjQueryで作ってみました。
分かりやすさを優先して、効率的な記述はしていません。
前回、「自分で作るjQueryスライドショー中級編」という記事を書きましたが、その方法で作成したプラグインです。
フェードイン・フェードアウトで画像が切り替わり、戻るボタンも進むボタンもないシンプルなスライドショーです。
「プラグインに頼らず自力でjQueryのスライドショーを作る方法(はじめてのスライドショー作成編)」が一番人気なので、中級編の記事を作ってみました。まずは復習からどうぞ。
今までは、最初にjQueryのプラグインを使わせて、慣れてきたら自作させるようにしていましたが・・・ なかなか自作しない(笑)
ということで、今年はプラグインの存在を教えずに、最初から自作させる方向で考えてます。
2013年2月からリニューアルを開始しましたが、半年経過してようやくエラーページを作りました。
エラーページすらネタにする(笑)
jQueryのanimateを使うことでスライドショーなどのアニメーションを作れますが、アニメーション完了後に処理をしたい場合があります。
その場合はこうします。