鼠标进入鼠标离开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。如果这不符合您的需求，您可以轻松解构类以获取您实际需要的代码。