« RubyでCGI(セッション編) | トップページ | SAOって概念どうかな »

2007年6月18日 (月)

script.aculo.usのEffectを止める

クリックイベントなんかでscript.aculo.us のEffectを発動するように
プログラムを組むとき、何も考慮をしないと、何度もクリックされたときに
効果が重なって変なことが起こったりする。

<script language="JavaScript"><!--
var move = function() {
    new Effect.MoveBy('mover1', 0, 100, {duration: 10.0});
}
//--></script>
<div id="mover1" onclick="move()"> hoge</div>


上記の例ではhogeをクリックすると、10秒かけてhogeが動くが、
10秒たたないうちにもう一回おすと、効果がかさなって
変な動きになってしまう。


そんなときは、Effectをcancel();することで、動きを止められる。

<script language="JavaScript"><!--
var Mover = Class.create();
Mover.prototype = {
    initialize : function(elementId) {
        this.elementId = elementId;
    },
    
    move : function() {
        if (this.effect != null) {
            this.effect.cancel();
        }
        this.effect = new Effect.MoveBy(this.elementId, 0, 100, {duration: 10.0});
    }
};
  
window.onload = function() {
    var mover = new Mover('mover2');
    $('mover2').onclick = mover.move.bind(mover);
};
//--><script>
<div id="mover2"> hoge</div>

こうすることで、2回目クリックすると、前の
effectはとまるので、効果が二重にかかることがなくなる。

 #上記の例では無駄にクラスを作っているけど、これは
 #本質ではないです。が、要するに、動くものをつくるときは、
 #そいつにeffectを紐付けてやって、ってやると楽チンだね
 #ということで。。

« RubyでCGI(セッション編) | トップページ | SAOって概念どうかな »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/34023/15484101

この記事へのトラックバック一覧です: script.aculo.usのEffectを止める:

« RubyでCGI(セッション編) | トップページ | SAOって概念どうかな »

Haruya's Violin

2017年9月
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

最近のトラックバック

無料ブログはココログ