0

マウスがdivに入ると、divから上にスライドする画像を表示するためのコードがあります。コードは、マウスの出入りが速すぎてアニメーションに時間がない場合のバグを除いて、希望どおりに機能します。完了するために、私はすでにmouseoverとmouseoutからmouseenterとmouseleaveに変更しましたが、これは役に立たないようです、どんな提案も素晴らしいでしょう

<script type="text/javascript">
document.observe("dom:loaded", function() {
  var effectInExecution=null;
  $('mid_about_us').observe('mouseenter', function() {
    if(effectInExecution) effectInExecution.cancel();
    effectInExecution=new Effect.SlideDown('about_us_mo',{style:'height:140px;', duration: 1.0 });


  });
  $('mid_about_us').observe('mouseleave', function() {
    if(effectInExecution) effectInExecution.cancel();
    effectInExecution=new Effect.SlideUp('about_us_mo',{style:'height:0px;', duration: 1.0 });
    });
});

4

1 に答える 1

1

この問題を解決するために、しばらく前に Prototype クラスを作成しました。この問題はscope、エフェクト オプションにパラメーターを指定することで修正できます。とにかくここに私が書いたクラスがあります：

var DivSlider = Class.create();
Object.extend(DivSlider, {
    toggle: function(selector, element, options) {
        element = $(element);
        this.options = Object.extend({
            duration: 0.5,
            fps: 35,
            scope: 'DivSlider',
            forceOpen: false
        }, options || {});

        var toggle = element.visible();
        if (toggle && this.options.forceOpen) {
            //already open, leave.. still call callback
            (this.options.after || Prototype.emptyFunction)
                    .bind(this, element)();
            return;
        }

        var effects = new Array();
        if (toggle) {
            effects.push(new Effect.SlideUp(element, {
                sync: true
            }));
        } else {
            $$(selector).each(function(el) {
                if ((element !== el) && el.visible()) {
                    effects.push(new Effect.SlideUp(el, {
                        sync: true
                    }));
                }
            });

            effects.push(new Effect.SlideDown(element, {
                sync: true
            }));
        }

        new Effect.Parallel(effects, {
            duration: this.options.duration,
            fps: this.options.fps,
            queue: {
                position: 'end',
                scope: this.options.scope
            },
            beforeStart: function() {
                (this.options.before || Prototype.emptyFunction)
                        .bind(this, element)();
            }.bind(this),
            afterFinish: function() {
                (this.options.after || Prototype.emptyFunction)
                        .bind(this, element)();
            }.bind(this)
        });
    }
});

あなたのケースでそれを使用するには、単に次を使用します：

DivSlider.toggle('div.your_class', your_id);

開始/終了コードでは、同じクラスの複数の div も処理できるため、クラスごとに 1 つの div のみを一度に開くことができます。これがニーズに合わない場合は、クラスを簡単に分解して、実際に必要なコードを取得できます。

于 2011-07-18T12:57:39.557 に答える