script.aculo.usで、2つのエフェクトを交互に実行する

JavaScript

script.aculo.usにはエフェクトをトグルする機能が用意されている。

Effect.toggle($('element'), 'slide');

このようにすることで

  • 要素が見えている場合はSlideUpを適用して隠し、
  • 要素が見えていない場合はSlideDownを適用して出現させる

という処理を自動化できる。自分で判断しなくて良いので楽チンだ。

デフォルトでは

Effect.PAIRS = {
'slide': ['SlideDown','SlideUp'],
'blind': ['BlindDown','BlindUp'],
'appear': ['Appear','Fade']
},

という3組が用意されているが、これは自分で定義することも可能。
例えば以下のようにすると Grow ⇔ Shrink のトグルエフェクトが定義できる。

Effect.PAIRS['grow-shrink'] = ['Grow', 'Shrink'];
    // エフェクトを指定する順番に注意。「1つ目が出現系、2つ目が隠し系」と覚えれば良い。

適用するには次ように書く。

Effect.toggle($('element'), 'grow-shrink');


ちなみに、エフェクトにオプションを渡すにはtoggleの第3引数に書けば良い。

Effect.toggle($('element'), 'grow-shrink', {duration:0.5, afterFinish: function() { alert('finish!') }});