오브젝트를 클릭하면 서서히 사라지는 효과를 주는 자바스크립트 함수를 만들어 보았다.
<script language=javascript type=text/javascript>
<!--
function fadeOut(obj, duration, delay) {
setTimeout('fadeOutTimer(' + obj.id + ',' + (5000 / duration) + ', 100)', delay)
}
function fadeOutTimer(obj, differ, opacity) {
var objCheck = eval(obj);
opacity = opacity - differ;
objCheck.style.filter = 'Alpha(opacity=' + opacity + ')';
if(opacity > 0) {
setTimeout('fadeOutTimer(' + objCheck.id + ',' + differ + ',' + opacity + ')', 50);
}
else {
objCheck.style.filter = 'Alpha(opacity=100)';
}
}
-->
</script>
<style type=text/css>
<!--
#spanObj {
text-align: center;
background-color: #aaffaa;
position: absolute;
}
-->
</style>
<span id="spanObj" onclick="fadeOut(this, 500, 500);">
클릭하면 0.5초 후에 0.5초 동안 사라진다<br />
<A href="http://pamsoo.tistory.com/" target=_blank>Pamsoo Company</A>
</span>
사용법은 다음과 같다.
fadeOut(object, duration, delay)
duration과 delay의 단위는 ms(1/1000초)이며, object를 delay 뒤에 duration 동안 사라지게 한다.
쓸만한지는 잘 모르겠다. duration이 5000ms 이상이면 동작을 보장 못한다. 그리고 position을 absolute로 하거나 width 또는 height를 정해 주거나 하지 않으면 잘 안되는 거 같은데, 이유는 계속 찾아봐야겠다.
아래는 테스트. 지워지고 다시 나타난다.
클릭하면 0.5초 후에 0.5초 동안 사라진다
Pamsoo Company
이거 파이어폭스에서는 안된다. 이것도 왜 안되는지 모르겠다.
