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在任何一个时间打开。如果这不符合您的需求，您可以轻松解构该类以获取您实际需要的代码。

鼠标进入鼠标离开slidedown动画错误

1 个答案: