インクレイブ[仙台・渋谷] - ITプロダクト・ホームページ制作・Webシステム開発・デザイン開発

こんにちは。プロダクト事業本部の佐藤です。

今日はjQueryでアニメーションをさせる場合のタイミングの管理についてまとめてみたいと思います。

■アニメーションとキュー

jQueryでアニメーション処理を書く場合、同一の要素に対して複数のアニメーションを指定すると、ひとつひとつ順番に実行されます。メソッドチェーンのかたちで書いても書かなくても同じです。

$('#box').fadeOut(500).fadeIn(500);
// ↓も同じ
//$('#box').fadeOut(500);
//$('#box').fadeIn(500);

ですが、複数の要素それぞれに対してアニメーションを指定した場合は、同時に実行されます。

$('#box1').fadeOut(500).fadeIn(500);
$('#box2').fadeOut(500).fadeIn(500);

上記のコードでは、box1もbox2も同時にアニメーションします。box1の処理が終わってからbox2が処理されるわけではありません。しかし、それぞれの要素に指定したfadeOutとfadeInは順番に実行されています。

jQueryのアニメーションは、要素ごとに、キューとして管理されます。要素ごとの管理なので、同じ要素に複数のアニメーションを指定した場合は、その要素のキューにどんどん追加され、順番に実行されていきます。別な要素にアニメーションを指定した場合は、別なキューに入るので、同時に実行されます。

■animateメソッド

fadeOutやfadeInのようなメソッドは、animateメソッドのショートカットです。そしてそのanimateメソッドを直接使えば、複数の動きをひとつのアニメーションとして実行させることもできます。

$('#box')
    .animate({
        opacity: 0,
        width: 0,
        height: 0
    }, 500)
    .animate({
        opacity: 1,
        width: 100,
        height: 100
    }, 500)
;

透明度(opacity)と幅(width)と高さ(height)に関する3つの動作がひとつのアニメーションとして扱われます。そして、ひとつの要素に対してanimateメソッドを複数回呼び出すとそれらはキューに登録されるので、ふたつのアニメーションが順番に実行されます。

■delayメソッド

delayメソッドを使うと、キューに待ち時間を指定することができます。

$('#box').fadeOut(500).delay(1000).fadeIn(500);

フェードアウトして、少し待って、フェードインします。

$('#box1').fadeOut(500).fadeIn(500);
$('#box2').delay(1000).fadeOut(500).fadeIn(500);

通常ならbox1とbox2のアニメーションは同時に実行されますが、box1のアニメーションが終わってからbox2がアニメーションしているように見せることができます。実際には、box1がアニメーションしているあいだ、box2がdelayによって待っているだけです。

delayをうまく使うといろいろな効果が出せるようになります。

$('.box').each(function(i){
    $(this).delay(i * 200).fadeTo(500, 0).delay(1000).fadeTo(500, 1);
});

このように、複数の要素に少しずつ時間をずらしたアニメーションをさせることでオシャレな効果を出すこともできます。

■まとめ

キューの考え方を理解し、animateメソッドで複数の動きをひとつにまとめたり、複数のキューの動きdelayで調整したりすることで、アニメーションの実行タイミングを自由に調整できます。自分でいろいろ試してみると、より感覚がわかってくると思います。

こんにちは、IT開発センターの齊藤です。

今回はIT開発センターで働いているプログラマー達の仕事環境に関してお伝えします。

プログラマーの仕事はその名のとおりプログラムの記述がメインですが、一日に膨大なコードを書くことも少くありません。その他にも各種ドキュメント作成など、社内で最もキーボードを使う仕事と言えると思います。その仕事柄、プログラマーにはキーボード環境にこだわりを持ったスタッフも多いようで、会社支給のキーボードではなく、自分好みのマイキーボードを使用しているスタッフもチラホラと見かけます。

今日の写真はインクレイブのプログラマー達が使っているキーボードをいくつかお借りして撮ってみました。左から、

・PFU Happy Hacking Keyboard
・ダイヤテック Majestouch
・東プレ Realforce

どれも、使いやすさに定評のあるタイプ。社内ではテンキーレスのタイプを好む人も多いようです。キーボードは料理人で言えば包丁のようなものではないかと思います。自分に最も快適なタイピング環境で、これからも良質なプログラムを作り続けてもらいたいです。

そんなIT開発センターでは、ただいまプログラマー仲間を募集中です。
我こそはと思う方は採用情報ページをご確認下さい。
（募集要項には書いてありませんが、キーボード持参も可能です…）

こんにちは、IT開発センターの小山です。

今回はWeb制作する際のCSS（スタイルシート）について基礎的なことをご紹介したいと思います。
まず始めに、ブラウザにはそれぞれ独自の余白や文字のサイズが設定されています。
Web制作時は、最初に各ブラウザでの独自設定を統一するために、固有で設定されている値を初期化する必要があります。

一番基本的で単純なやり方が「*（ユニバーサルセレクタ）」を使った方法です。

* {
     margin:0;
     padding:0;
}

と記述します。

一見、これは便利ですがこれだと全てのセレクタに対しての指定となるので意図しない値まで初期化してしまう場合があります。

Web制作者であれば試行錯誤を繰り返してこのスタイルの初期化設定を行うケースが多いですが、初めて制作される方にも比較的簡単にできる方法をご紹介いたします。

・YUI Reset CSSを使う方法
YUI（Yahoo! UI Library）：http://developer.yahoo.com/yui/reset/

html {
	color:#000;
	background:#FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form,
 fieldset, legend, input, button, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset, img {
	border:0;
}
address, caption, cite, code, dfn, em, strong, th, var, optgroup {
	font-style:inherit;
	font-weight:inherit;
}
del, ins {
	text-decoration:none;
}
li {
	list-style:none;
}
caption, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}
q:before, q:after {
	content:'';
}
abbr, acronym {
	border:0;
	font-variant:normal;
}
sup {
	vertical-align:baseline;
}
sub {
	vertical-align:baseline;
}
legend {
	color:#000;
}
input, button, textarea, select, optgroup, option {
	font-family:inherit;
	font-size:inherit;
	font-style:inherit;
	font-weight:inherit;
}
input, button, textarea, select {
*font-size:100%;
}

上記のスタイルをCSSに追加するだけでブラウザ固有の余白や文字サイズを初期化することができます。とても簡単ですね。

今回ご紹介したブラウザ独自のスタイルの初期化と前回私がご紹介したIE*.jsと合わせてお使い頂ければよりスムーズにWeb制作を行うことができるはずです。
ぜひ合わせてご覧ください。