javascript : 의도하지 않은 피드백 루프

Question

javascript에서 mouseover 이벤트에 의해 트리거 된 애니메이션을 만든 다음 마우스를 놓았을 때 초기 상태로 돌아갑니다. 사용자가 페이지의 이미지 위에 커서를 올려 놓으면 초기 높이가 0px 인 다른 div가 이미지 하단의 높이가 50px까지 점차 높아집니다.

내가 직면 한 문제는 커서에서 이미지의 아래쪽 부분을 차지하는 div로 커서를 이동하면 이미지와 별도의 요소 인 것처럼 mouseout을 트리거 한 다음 새로운 mouseover 이벤트는 커서가 이미지 위에 더 이상 있지 않음을 감지하면 div가 사라 지므로 (즉 div가 나타나고 빠르게 사라지는 것을 의미하기 때문에) 연속적으로 새 mouseover 이벤트가 발생합니다.

커서가 이미지에서 실행될 때 div가 사라지지 않도록 루프를 깨는 방법에 대해 궁금합니다. 즉, 마우스가 다른 요소로 이동하지 않으면 트리거에서 onmouseout 이벤트가 발생하지 않도록합니다. 새로 생성 된 div가 아닙니다.)

여기 잘하면 더 나은 문제를 설명하기 위해 이미지의 :

http://i.imgur.com/qcE64.jpg

Answer 1

나는 당신이 이미지 및 애니메이션을하고있는 사업부 모두 주위에 래퍼 DIV를 사용 싶어이 상황에 대해 생각합니다. mouseover/mouseout 이벤트를 래퍼에 첨부하면 예상 한대로 트리거됩니다. Here's a jsfiddle example