Fade in dan Fade out Content dengan Javascript

Senin, 20 Juni 2011 | 15:18:07

Fade in dan Fade out Content dengan Javascript

Berikut, sedikit kode Javascript untuk memudarkan (Fade) beberapa content (text, image, dll) dari website atau blog Anda. Sesuai dengan cara kerjanya, script ini dinamakan Fade in dan Fade out Content.

Cara kerjanya, apabila mouse diarahkan -onmouseover(), maka content akan muncul (fade in), Sebaliknya-onmouseout(), maka content akan menghilang perlahan (fade out).

Langsung saja, berikut ini kodenya.

<html><head></head>
<body>

<script type='text/javascript'>
// Browser safe opacity handling function
function setOpacity( value ) {
document.getElementById("styled_popup").style.opacity = value / 10;
document.getElementById("styled_popup").style.filter = 'alpha(opacity=' + value * 10 + ')';
}

function fadeInMyPopup() {
for( var i = 0 ; i <= 100 ; i++ )
setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i );
}

function fadeOutMyPopup() {
for( var i = 0 ; i <= 100 ; i++ ) {
setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
}

setTimeout('closeMyPopup()', 800 );
}

function closeMyPopup() {
document.getElementById("styled_popup").style.visibility = "hidden"
}

function fireMyPopup() {
setOpacity( 0 );
document.getElementById("styled_popup").style.visibility = "visible";
fadeInMyPopup();
}
</script>

<table id='styled_popup' name='styled_popup' style='width: 380px; height: 200px; visibility:hidden; zoom: 1' bgcolor="#ffffdd" cellpadding='0' cellspacing='0' border='0'>
<tr><td style='width: 380px; height: 200px;'>
Hallo!<br>
Lihatlah tulisan ini..!<br /><br />
<img src="image/ariewebnet.png" />
</td></tr>
</table>
<input type='submit' onmouseover='fireMyPopup()' onmouseout='closeMyPopup()' value='Arahkan Kesini Mouse Anda!'>

</body>
</html>