Firejune

새로 리뉴얼된 야후의 탑 라이트 박스에서 아이디어를 얻어 마우스오버, 아웃에 타임아웃을 적용하여 뚝딱 만들어 본 컨텐츠 쇼/하이드 자바스크립트입니다. Prototype과 Scriptaculous 라이브러리가 사용되었습니다. 마우스가 오버되고 0.3초가 지나면 지정한 컨텐츠가 펼쳐지고 마우스가 아웃되어 0.2초가 지나면 닫힙니다. IE와 파이어폭스에서 정상으로 작동하는 것을 확인하였습니다.

// Timeout Rollover Dynamic Contents
var Roll = {
  time: null,
  over: function(element) {
    element = $(element);
    clearTimeout(this.time);
    if (!element.visible()) {
      this.time = setTimeout(function() {
        element.blindDown({duration:0.3});
      }, 300);
    }
  },
  out: function(element) {
    element = $(element);
    if (!element.visible()) clearTimeout(this.time);
    else this.time = setTimeout(function() {
      element.blindUp({duration:0.3});
    }, 200);
  }
};

<a href="#element" onmouseout="Roll.out('element')" onmouseover="Roll.over('element')">오버해봐</a>
<div id="element" onmouseout="Roll.out(this)" onmouseover="Roll.over(this)"></div>