鼠标进入鼠标离开滑动动画错误答案

【问题标题】：mouse enter mouse leave slidedown animation error鼠标进入鼠标离开滑动动画错误
【发布时间】：2011-07-18 11:33:43
【问题描述】：

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

【问题讨论】：

标签： prototypejs slidedown slideup mouseenter mouseleave

【解决方案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。如果这不符合您的需求，您可以轻松地解构该类以获取您实际需要的代码。

【讨论】：