CSS3を使用したアニメーション

JavaScriptを使わずアニメーションを実現する他の方法は「CSS3 Transition」や「CSS3 Animation」といった機能使う方法です。
 
「あるプロパティの数値を一定時間かけて変化させる」という処理は、CSS3 Transitionを用いれば簡単に実現できます。

例えば、情報バーのCSSに以下のようなプロパティを追加します。

#infobar {
position: fixed;
bottom: 10px;
right: -414px;
...中略...
 
/* CSS3 Transition */
transition: right 500ms;
-webkit-transition: right 500ms;
-moz-transition: right 500ms;
-o-transition: right 500ms;
-ms-transition: right 500ms;
}

しかし、CSS3 Transitionの仕様がまだ固まっていないため、各ブラウザーはドラフト版の仕様にもとづいた独自実装を行なっているため、「-webkit-」や「-moz-」などの接頭辞を持つ特別なプロパティも同時に記述する必要があります。
 
そして、情報バーが表示された状態のCSSも追加しておきます。

#infobar.visible {
right: 0;
}

そして、このvisibleクラスをJavaScriptで付けたり外したりするだけで、自然なアニメーションが実装されます。jQueryのaddClass()、removeClass()というメソッドを用いればclass属性を操作できます。

if (scrollBottom < 200) {
if (infobarHidden) {
infobarHidden = false;
// 情報バーを表示
infobar.addClass('visible');
}
} else if (!infobarHidden) {
infobarHidden = true;
// 情報バーを画面の右に隠す
infobar.removeClass('visible');
}

こうしたCSS3のアニメーション機能を使用すれば、アニメーションの処理にJavaScriptを用いる必要がなくなるため、コードがシンプルになるだけではなく、アニメーションの処理をブラウザーに任せることができ、処理負荷が低くてスムーズなアニメーションが期待できます。
 
ただ、CSS3のアニメーション機能は、ブラウザーによってサポート状況が異なります。そのため当分の間は、JavaScriptによるアニメーション処理も使われ続けると思われます。