鼠标进入鼠标离开下滑动画错误

Question

我有一段代码，用于显示当鼠标进入 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 });
    });
});

Answer 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，只允许每个类打开一个div时间。如果这不符合您的需求，您可以轻松解构该类以获得您实际需要的代码。