ありそうでなかった？要素をふわっと表示させるjQueryプラグイン whatInOut

Windows7のウィンドウのようにふわっと表示・非表示させることができます。ふわっとと、whatをかけ･･･（ｒｙ
色々な環境で試せてないので、バグというか予期しない動きは多いかもしれないです。twitterかコメントで報告もらえれば対応できる範囲で対応します。

ふわっとするためだけにeasingが必要になるいけてない仕様なんですけど、easingを別のところでも使ってカバーしてください（！）それかeasing関数を書いてもらえると･･･

Live demo
Download demo files

導入方法

1. jQueryとeasingプラグイン、whatinoutを読み込む。

3. 実行する

$()で対象にする要素を指定します。実際に使う場合は、ふわっと表示させたいときにwhatIn()、ふわっと消したいときにwhatOut()、ふわっとスライドインしたいときにwhatSlideIn()、ふわっとスライドアウトしたいときにwhatSlideOut()を実行します。この辺はshow()やhide()、fadeIn()やfadeOut()と使い方がよく似ているので問題はないでしょう。

jQuery(function($) {
        $('.whatInOut').whatIn({
                sizeFrom: 95,
                duration: 500
        });
        $('.whatInOut').whatOut({
                sizeTo: 95,
                duration: 500
        });
        $('.whatInOut').whatSlideIn();
        $('.whatInOut').whatSlideOut();
});

オプション

実行時の引数にオプションを与えることで、設定をある程度変えることができます。使うことが出来るオプションは以下の通りです。

whatIn()とwhatOut()、whatSlideIn()とwhatSlideOut()ではそれぞれオプション項目の名前がちょっと違います。

whatIn()

オプション項目	内容
easing	好きなeasingを指定できます。デフォルトはeaseInOutCircでeasingプラグインを読んでない場合はswing
duration	表示するまでの時間。ミリセカンドかslow, normal, fast
sizeFrom	元の大きさの何%の大きさからアニメーションを始めるか。%ですが、指定は数値のみ
callback	コールバック関数 function(){ handler }

whatOut()

オプション項目	内容
easing	好きなeasingを指定できます。デフォルトはeaseInOutCircでeasingプラグインを読んでない場合はswing
duration	表示するまでの時間。ミリセカンドかslow, normal, fast
sizeTo	元の大きさの何%の大きさまでアニメーションを行うか。%ですが、指定は数値のみ
callback	コールバック関数 function(){ handler }

whatSlideIn()

オプション項目	内容
easing	好きなeasingを指定できます。デフォルトはeaseInOutCircでeasingプラグインを読んでない場合はswing
duration	表示するまでの時間。ミリセカンドかslow, normal, fast
posIn	元の位置からどれだけずらした状態から表示するか。下から表示する場合正の値、上から表示する場合負の値（’-20′などのように)を指定
callback	コールバック関数 function(){ handler }

whatSlideOut()

オプション項目	内容
easing	好きなeasingを指定できます。デフォルトはeaseInOutCircでeasingプラグインを読んでない場合はswing
duration	表示するまでの時間。ミリセカンドかslow, normal, fast
posOut	元の位置からどれだけずらした状態で非表示するか。下にずらして非表示する場合正の値、上にずらして非表示する場合負の値（’-20′などのように)を指定
callback	コールバック関数 function(){ handler }

Live demo
Download demo files

仕様

• インラインな要素には適用できないっぽいです（改善中かも
• 連続して実行してもたぶん大丈夫
• クロスブラウザ

Special Thanks

mukimukiメンバ、