Scriptaculous Effect.Appear glitch onmouseover

Question

scriptaculous Effect.Appear()을 메뉴 옵션으로 사용할 때 문제가 생겼습니다. 순수한 CSS와 scriptaculous를 사용하여 플래시와 비슷한 메뉴를 만들고 싶었습니다.

상자 위에 마우스를 가져 가면 텍스트 (display: none;)가 나타나고 상자의 높이와 배경색이 바뀝니다. 이제 문제는 마우스가 매우 빠르고 미친 듯이 움직일 때 텍스트가 그대로 남아있는 것입니다.

내가 원하는 것은 내가 가져 가면 텍스트가 나타나고 내 마우스가 밖으로 나가면 텍스트가 사라진다는 것입니다.

내 코드

function ShowEffect(element){ 
    new Effect.Appear(element, 
    {duration:0.3, from:0, to:1.0, queue: 'front'}); 
} 
function HideEffect(element){ 
    new Effect.Appear(element, 
    {duration:0.2, from:1.0, to:0, queue: 'end'}); 
} 

div의

어떤 도움에 감사드립니다

<div class="lefty" style="width: 90px; margin-right: 2px;"> 
       <div style="display: none;" id="clicker2text">ABOUT US</div> 
       <div style="width: 90px;" onmouseover="ShowEffect('clicker2text')" onmouseout="HideEffect('clicker2text')"></div> 
       </div> 

:

Answer 1

를 대신이

같은 이벤트 관찰자를 사용 사업부에 onmouseover 속성을 사용하는

$$('.lefty').invoke('observe','mouseover',ShowEffect); 
$$('.lefty').invoke('observe','mouseout',HideEffect); 

하지만 몸에 맞춰 거품을 내고 올바른 요소가 있다면 행동하는 것을 지켜 보면서 더 효과가 있다고 생각합니다.

$$('body').first().observe('mouseover',function(e){ 
    if(e.findElement().hasClass('lefty')) 
    { 
     ShowEffect(e.findElement()); 
    } 
    else 
    { 
     //trigger for all of the menus just to make sure the are hidden 
     //instead of stuck on 
     $$('.lefty').each(function(element){ 
      if(element.visible()) 
      { 
       HideEffect(); 
      } 
     }); 
    } 
}); 

이렇게하면 아이디어를 얻을 수 있습니다. 문제가 해결되는지 확인하십시오.