мышь вводит мышь покидает ползунок ошибка анимации - PullRequest
Новая
       16

мышь вводит мышь покидает ползунок ошибка анимации

0 голосов
/ 18 июля 2011

У меня есть фрагмент кода для показа картинки, которая скользит вверх от div, когда мышь входит в div, код работает именно так, как я хочу, за исключением ошибок, когда мышь слишком быстро включается и выключается, а анимация не ' у меня нет времени на завершение, я уже перешел с наведения мыши и мышки на мышиный центр и отпуск мышью, и это, похоже, не помогло, любые предложения были бы хорошими 

<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 });
    });
});

1 Ответ

1 голос
/ 18 июля 2011

Некоторое время назад я написал класс 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 на класс в любой момент времени. Если это не соответствует вашим потребностям, вы можете легко деконструировать класс, чтобы получить код, который вам действительно нужен.

...