새로 리뉴얼된 야후의 탑 라이트 박스에서 아이디어를 얻어 마우스오버, 아웃에 타임아웃을 적용하여 뚝딱 만들어 본 컨텐츠 쇼/하이드 자바스크립트입니다. 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>
Comments