shrinkして消えて現れるAjaxエフェクト『Effect.shrink | scriptaculous』

テストで作っていたAjaxエフェクトをメモもかねてエントリー。 scriptaculousを見ていて、shrinkが面白かったので実装してみました。 ↑の画像をクリックしてみてください。 shrinkして消えて現れます。 仕組みとしては、Effect.Shrink(this)で該当のdivをshrinkして、window.setTimeoutでタイマーをセットして、Effect.Appear(\’shrinkjs\’で2500ミリ秒後にappearさせています。 ■HTMLソースは下記のとおり。 <div id="shrinkjs" onclick="new Effect.Shrink(this); window.setTimeout(‘Effect.Appear(\’shrinkjs\’, {duration:.3})’,2500);"><img src="/mt/img/shrink.jpg" alt="shrink.js" border="0"></div> ■headのソースは下記のとおり。 <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
prototypeなどはバージョンが違うと動かないことがよくあるので、最新のものを使ってください。 ほかにもいろいろと実装してみたいですね。 scriptaculousのデモは↓から！ » scriptaculous Demo