마우스를 입력하면 슬라이더 다운 애니메이션 오류가 발생합니다

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 만 열 수 있습니다. 이것이 당신의 요구에 맞지 않는다면, 실제로 필요한 코드를 얻기 위해 클래스를 쉽게 해체 할 수 있습니다.