要素のマウスオーバー時のhover効果をアニメーションさせるjQueryプラグイン。 リスト要素の各アイテムにマウスオーバーした時に、そのアイテムの背後にjQueryでhover用の要素を動的に生成して、アニメーション表示させています。 幅、高さ、オフセットなどオブジェクトの位置情報を取得するjQuery Dimensions Pluginを併用しています。 このプラグインを適用する要素には、CSS上のルールがあります。 マウスオーバーされたアイテムの親要素には、position:relativeあるいはposition:absoluteが指定されていること。 マウスオーバーされたアイテムには、z-indexが指定されていること。 動的に生成されたアイテムは、hoverされたアイテムのz-indexより小さいz-indexが指定されていること。 /* hoverされたアイテムの親要素 */

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

JavaScriptテストの基礎知識と使えるフレームワーク6選：フレームワークで実践！ JavaScriptテスト入門（1）（1/3 ページ） しっかりとJavaScriptの“テスト”を行うために、最近のJavaScript事情やテストを取り巻く環境、今注目のテストフレームワークを6つ紹介する JavaScriptでもテストを書こう ＠ITの読者の方たちのほとんどは、どのような言語を主に利用しているのかなどの違いはあるにせよ、日常的にプログラムを書いている方たちが多いかと思います。 アプリケーションを作る、ライブラリを作成する、オープンソースプロジェクトに貢献するなど、皆さんがプログラムを書く場面はそれぞれいくつかあるはずです。それらプログラムを書く場面に共通して大切な習慣の1つとして、「作成するプログラムに対しては必ずテストコードを書く」ことがあるのは、誰にでも同意してもらえることでし

こんにちは、太田です。3回ほどJavaScriptの基礎的な内容が続いたので、今回はグラフィカルなアニメーションについて解説します。グラフィカルなJavaScriptというと、難しい・応用的なイメージがあるかもしれませんが、JavaScriptでのアニメーションとはすなわちCSSを段階的に操作するということで、そのポイントを抑えれば中身は単純なものです。 アニメーションの前提知識 HTMLにおける通常のアニメーションを構成するのは、「⁠特定の要素」に対して、「⁠そのCSSプロパティ」を「ある時点からある時点まで」の時間の中で、「⁠ある値からある値に操作」する、といった要素です。 特定の要素と、CSSプロパティについては問題ないと思います。問題となるのは「時間と値の操作」です。 まず、単純にインクリメントするだけというサンプルを見てみましょう。 良くないアニメーション var y = 0;

こんにちは、太田です。前回はアニメーションの基礎を学びました。今回はその基礎を実際に役立てるところを学んでいきます。 アニメーションを用いる場面と効果 さて、前回学んだようなアニメーションは、すなわち「状態の変化を見せる」ものでした。ある状態から次の状態へと時間をかけて変化させる処理を実装したものです。 なぜこういったアニメーションを行うのか、それには主に2つの理由・効果があります。 まず1つは読み込みの待ち時間をごまかす効果があります。サムネイル画像をクリックしたら、大きな画像の読み込みを開始しつつユーザーにはアニメーションを見せておき、読み込みが完了したら画像を表示するといったテクニックは、ユーザーの体感的な早さを改善する効果があります。 また、状態の変化が段階的に起こることで、その変化がどの程度の変化なのか直感的にわかる効果があります。例えば、あるリンクをクリックしたときに同じページ

こんにちは、前回、前々回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。今回は前回のドラッグと関連の深いスライダーを実装してみます。 基本のスライダー スライダーは簡単にいえば動きの制限されたドラッグです。 今回も、最初はなるべくシンプルに実装してみます。まず、基本となるHTMLは次の通りです。 スライダーの基本HTML <form class="js-slider-form" onsubmit="return false;"> <input type="text" name="slider" id="slider1o" value="0"> <div id="slider1" class="js-slider"> <div></div> <input type="button" value=""> </div> </form> 今回は少々手抜きで、input ty

こんにちは。今回も引き続き、JavaScriptでUIを実装する方法を紹介していきます。今回はやや趣向を変えて、JavaScriptでカレンダーを実装してみます。 Dateオブジェクト カレンダーを実装する前に、JavaScriptのDateオブジェクトについておさらいしておきましょう。 まず、Dateオブジェクトはnew演算子でインスタンスを作ってから使います。そのとき渡す引数は4つのタイプがあります。 引数なし→現在の日時 文字列→日付を表す文字列としてパースして解釈 数値(1つ)→1970年1月1日00:00:00時点からのミリ秒数として解釈 数値(2つ以上)→第一引数から順番に、年、月、日、時、分、秒、ミリ秒として解釈 Dateオブジェクトの初期化 new Date(); // 現在日時 new Date('2011/2/28'); new Date(1298818800000);

こんにちは。前回から引き続き、JavaScriptによるUIを実装する方法を紹介していきます。 基本のタブメニュー ウェブアプリでよく使われるインタフェースのひとつ、タブメニューを実装してみましょう。まず、骨組みとなる基本のHTMLは以下のとおりです。 タブメニューの基本HTML <div class="js-tabs"> <ul id="tab_menu1" class="tab_menu"> <li><a href="#page1-1">Page 1</a></li> <li><a href="#page1-2">Page 2</a></li> <li><a href="#page1-3">Page 3</a></li> </ul> <div id="tab_content1" class="tab_content"> <div id="page1-1" class="page"> P

こんにちは。前回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。 要素のドラッグ ウェブアプリでよく使われるインタフェースのひとつ、ドラッグを実装してみます。ドラッグを使用するケースは幾つかありますが、今回は投稿用フォームをドラッグで移動できるようにするという使い方を想定してみます。 投稿フォームで入力する際、そのページのコンテンツを見ながら入力したいということはよくあります。フォームを好きな位置に移動できればそれが実現できます。 ドラッグの基本HTML <div class="js-drag" id="js-drag-1"> <form class="js-drag-form" onsubmit="return false;"> <textarea></textarea> <input class="submit" type="submit" value="送信"

3/4補足 本稿を見ていただいた皆さん、はてなブックマークなどでコメントいただき、ありがとうございます。話題のNode.jsということもあり、はてなブックマークも1000ユーザーを超えました。私の力不足もあり、いろいろな方からご指摘をいただいておりますので、Nodeのインストール方法については、近日中に次回記事で補足・訂正させていただきたいと思います。ご指摘ありがとうございます。非常に勉強になります。 Node.js 0.4をインストールしてみよう 本稿では、Ubuntu 10.10に記事執筆時のNode.js 最新版（v0.4.0）をインストールします。 以下のコマンドをターミナルから実行し、Node.jsのソースコードをダウンロードします。