Fade In and Fade Out
Steps:
<html lang="en"><head>
<title>Document</title>
<script type="text/javascript">
var opacity=0;
var intervalID=0;
function fadeOut(){
intervalID=setInterval(hide,300)
}
function fadeIn(){
intervalID=setInterval(show,300)
}
function show(){
var img = document.getElementById('img1');
opacity=Number(window.getComputedStyle(img).getPropertyValue
("opacity"));
if (opacity<1) {
opacity=opacity+0.1;
img.style.opacity=opacity;
} else {
clearInterval(intervalID);
}
}
function hide(){
var img = document.getElementById('img1');
opacity=Number(window.getComputedStyle(img).getPropertyValue
("opacity"));
if (opacity>0) {
opacity=opacity-0.1;
img.style.opacity=opacity;
} else {
clearInterval(intervalID);
}
} </script>
</head>
<body>
<button onclick="fadeIn()" id="fadeIn">Fade In</button><br><br>
<img id="img1" src="/images/f4.jpg" height="150px" width="150px"><br>
<button onclick="fadeOut()" id="fadeOut">Fade Out</button>
</body>
</html>
0 Comments