マウスを入力したままスライダダウンのアニメーションエラーを残す

Question

divを入力するとdivからスライドする画像を表示するためのコードがあります。コードは、マウスが出入りするときのバグを除いたものです早すぎるとアニメーションが完了する時間を持っていない、私はすでに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パラメータをefに渡すことで問題を解決できますfectオプション。

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だけを一度に開くことができます。これがあなたのニーズに合わない場合は、実際に必要なコードを得るためにクラスを簡単に分解することができます。