Prototype.js를 사용하여 마우스가 요소를 터치하는지 감지합니다.

Question

엘리먼트가 엘리먼트를 터치 할 때 엘리먼트가 천천히 페이드 아웃되고, 엘리먼트가 엘리먼트 밖에있을 때 페이드 인하는 Javascript 애플리케이션을 만들려고합니다. Prototype을 Scriptaculous와 함께 사용하고 있습니다. 그래서 주어진 시간에 마우스가 객체를 만지고 있는지 여부를 알려주는 Prototype 함수가 있습니까?

Scriptaculous FadeOut/FadeIn 효과를 사용하는 주된 문제는 다른 하나가 실행되기 전에 트리거되면 효과 충돌과 요소 오작동입니다.

Answer 1

그냥 (폐쇄에 예를 들어) 어딘가에 효과 객체를 저장하고 당신이

var element = $("element"), 
    currentEffect = null; 

element.observe("mouseenter", function() { 
    if (currentEffect) { 
     currentEffect.cancel(); 
    } 
    currentEffect = new Effect.Fade(element); 
}); 

element.observe("mouseleave", function() { 
    if (currentEffect) { 
     currentEffect.cancel(); 
    } 
    currentEffect = new Effect.Appear(element); 
}); 

jsfiddle demo

는 (분명히 여러 가지 방법으로 그 리팩토링 할 수있는 다양한 효과를 적용 할 때 취소 , 기본적으로 관찰자는 mouseenter과 mouseleave 이벤트를 관찰해야하며, 새 이벤트를 시작하기 전에 실행중인 효과를 취소해야합니다.) Opera에서 100 % 사라질 때까지 계속 마우스 오버하면,