Search

Monday, April 6, 2015
0 comments

Element fadeout, FadeIn using Java Script

9:12 AMMonday, April 6, 2015
<!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


Protected by Copyscape Online Copyright Protection Software

0 comments :

Post a Comment

 
Toggle Footer
Top