Element fadeout, FadeIn using Java Script

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#box1
{
    background-color : Gray;
    height:200px;
    width : 200px;
}


</style>
<script type ="text/javascript">
    function fadeout(ele) {
        var elem = document.getElementById(ele);
        elem.style.transition = "opacity 1.0s linear 0s";
        elem.style.opacity = 0;
    }
    function fadein(ele) {
        var elem = document.getElementById(ele);
        elem.style.transition = "opacity 1.0s linear 0s";
        elem.style.opacity = 1;
    }

</script>

    <title>Change Background color</title>
</head>
<body>
<button onclick="fadeout('box1');"> fadeout</button>
<button onclick="fadein('box1');"> fadein</button>

<div id="box1">Paste your content here</div>
</body>
</html>

Code generate the following output


Element fadeout, FadeIn using Java ScriptElement fadeout, FadeIn using Java Script


Element fadeout, FadeIn using Java Script Element fadeout, FadeIn using Java Script Reviewed by Jacob Lefore on April 06, 2015 Rating: 5

No comments