JQuery - Mac OSのドックの表示/非表示動作のようなアニメーションを実装する方法は？

Question

私は、ブラウザウィンドウの右側にウィジェットのdivを持つWebアプリケーションを作成しようとしています。私はMac OS Xのドックに似たスタイルで、このdivを動的に表示して隠したいと思っています。つまり、マウスが近づくとウィジェットdivがブラウザウィンドウの側から「スライドアウト」し、マウスがdivを離れると「スライドバック」したいと思います。

私はJQueryとJQuery UIを使用しています。

誰も私にこのようなものをどのように実装するかもしれないかについての指針を私に与えることができますか？

おかげで、

D.

Answer 1

最良の方法は、jQueryのUIのエフェクトライブラリーに目を通すことです。あなたはそれがたくさんあるので、あなたは驚くでしょう。ここでは、jQuery UIのSlideアニメーションへのlinkです。それはいくつかの変更が必要な場合がありますので、私はコードをテストしていない

$("#undercover").hover(function() { 
     $(this).show("slide", { direction: "right" }, 1000); 
}, function(){ 
     $(this).hide("slide", { direction: "left" }, 1000); 
}); 

-

コードは、おそらく次のようになります。 #undercover divは、ドックの機密領域のようなものです。ドックをスライドさせる必要がある場合は、#undercover divのホバーイベントを検出することによって行います。

しかし、あなたは多くのjQueryのUIとjQueryを使っての作業に多くの時間を無駄にしないだろうしていない場合 - あなたは先に行くとjqDockを使用することができます。その考えはAlan Bellowsでした。

Answer 2

は、Twitterのブートストラップを見てみましょう。彼らはコラプスと呼ばれる効果を発揮します。

http://twitter.github.com/bootstrap/javascript.html#collapse

Answer 3

あなたのための仕事のほとんど（またはすべて）を行う必要がありますjQueryプラグインコールjqDockがあります。