鼠標進入鼠標離開slidedown動畫錯誤

Question

我有一段代碼，用於顯示當鼠標進入div時從div滑出的圖片，代碼完全按照我的想法工作，除了它在鼠標懸停進出時發生錯誤過快和動畫沒有時間去完成，我已經從鼠標懸停及移出變化，到了mouseenter和鼠標離開，這似乎並沒有幫助，任何建議將是巨大

<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類，回來解決這個問題，這個問題可以通過給ef提供一個scope參數來解決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同一類的此外，每個班級只能在任何時間打開一個div。如果這不符合您的需求，您可以輕鬆解構類以獲取您實際需要的代碼。