JS native realizes Div fade in and out

The JQ is encapsulated into the fade-out, which can be achieved simply by using a single method. FadeIn (), FadeOut (); If our interface is not using JQ then how is native implementation?

Let's explain this principle. When we want to implement the fade in, the first is to let the hidden div slowly display, by letting the opacity slowly from 0.0 (completely transparent) to 1.0 (completely opaque). The gradual exit is logical in turn.

Below we directly paste the code:

Css:

* {margin:0; Padding0}body {font:12px verdana,arial; color:#777; background:#222}a {color:#999; text-decoration:none}a:hover {color: #bbb} #wrapper {width:500px; margin:75px Auto} #buttons {Height:35px}.button { border:1px solid #eee; Background: #ccc; Border-radius:3px; -moz-border-radius:3px; Padding:4px05px; width:245px; Text-align:center; Cursor:pointer;float: Left; color:#555}.button:hover {border:1px solid #fff; background: #d9d9d9; color:#333}.floatright {float: Right} #fade {opacity:0; Filter:alpha (opacity='0') border-radius:3px; -moz-border-radius:3px; margin-bottom:10px; PADDING:9PX 10px0; height:26px; BORDER:1PX Solid #548954; Background: #355c33; Color: #79af72; text-shadow:1px 1px #21341d}

Html:

<div id="wrapper"><div id="Fade">javascript</div><div id="Buttons"> <divclass="Button"onclick="fadeeffect.init (' fade ', 1)">fade in</div> <divclass="button Floatright"onclick="fadeeffect.init (' fade ', 0)">fade out</div></div></p></div>

ls|

varfadeeffect=function () {return{init:function (ID, flag, target) { This. Elem =document.getElementById (ID); Clearinterval ( This. elem.si);  This. target = target? Target:flag? -:0;  This. Flag = Flag | | -1;  This. Alpha = This. elem.style.opacity? Parsefloat ( This. elem.style.opacity) * -:0;  This. Si = setinterval (function () {Fadeeffect.tween ()}, -); }, Tween:function () {if( This. Alpha = = This. Target) {Clearinterval ( This. Si); }Else{    varValue = Math.Round ( This. Alpha + (( This. Target- This. Alpha) *. to)) + (1* This. Flag);  This. elem.style.opacity = value/ -;  This. Elem.style.filter ='Alpha (opacity='+ Value +')';  This. Alpha =Value}} }}();

JS native realizes Div fade in and out