このサンプルは、jQuery 1.4.1のaniamte()メソッドを利用してCSS単位でイージング(Easing)を設定してアニメーション化します。サンプルが表示されたら青のボックスをクリックしてフォーカスを移動します。次に[ESC]キーを押してください。青のボックスが縦長に変わります。[Enter]キーを押すとの元の横長のボックスに戻ります。
ここでは、CSSのwidthとheightプロパティに異なるEasingを設定してアニメーション化しています。
$(document).keyup(function(event) {
if (event.keyCode == 13) { // enter key
$('#mydiv').stop().animate({
width: ['400', 'swing'],
height: ['200', 'linear']
}, 1000, 'linear');
}
if (event.keyCode == 27) { // esc key
$('#mydiv').stop().animate({
width: ['200','swing'],
height: ['400','linear']
}, 1000, 'linear');
}
});