script.aculo.usのeffects.jsには、いろいろな種類のエフェクトがあります。
これらの中で、私が良く使うのは、下記のエフェクトになります。
- Effect.Highlight
- Effect.Appear
- Effect.Fade
上記のエフェクトは、他のエフェクトと比べて、動きが無いエフェクトです。シンプルなだけに、いろいろな箇所で使えると思います。(エフェクトの内容はデモを参照してみてください。)
他のエフェクトも試しましたが、動きがあるエフェクトはスムーズ(滑らか)に動かない場合もあり、あまり無理して使わないようにしています。(自分の環境でちゃんとスムーズに動いたからといって、他人にもそう見えるとは限らないので)
上記の3つ以外だと、Effect.DropOutも動きのわりに、結構スムーズな動きをすると思います。フェードアウトしながらの動きなので、スムーズに動いてなくても、それほどカクカク感が目立たないというのもあるかもしれません。
私が良く使うパターンとして、Effect.DropOutとEffect.Appearを使った、ページ表示の切り替えがあります。もともと表示されているコンテンツをEffect.DropOutで消して、その後から新たなコンテンツをEffect.Appearで表示するといった手順です。
下記のサイトのサイドメニューを押していただくと、実際その動きがわかるかと思います。
script.aculo.usのエフェクトは、いくつかの基本的なエフェクト以外は、複数のエフェクトを組み合わせて実現しています。もし、自分が欲しいエフェクトが無くても、いまあるエフェクトの組み合わせで実現出来る場合もありますので、いろいろ試してみると面白いと思います。(上記サイトのヘッダー部分も、Effect.MoveByとEffect.Appearを組み合わせたエフェクトを使っています)
script.aculo.usは本当にすばらしいですね！
