fade in and fade out in pure javascript without jquery

javascript fadein fade fadeout
knight picture knight · Feb 22, 2015 · Viewed 11.3k times · Source

Here I have a function that fades a square box with id="box" as soon as the page loads. I tried but failed to find out how to fade in the box again or simply how to fade in a box or an element with pure JavaScript not jQuery. Here is my code for fadeOut() function:

Many thanks in advance to contributors. cheers

Answer

Anarion picture Anarion · Feb 22, 2015

I'd suggest using CSS animation

@-webkit-keyframes fadeout {
    0% {opacity:1;}
    100% {opacity:0;}
}
@keyframes fadeout {
    0% {opacity:1;}
    100% {opacity:0;}
}
.fadeOut {
  opacity:0;
  -moz-animation   : fadeout 1s linear;
  -webkit-animation: fadeout 1s linear;
  animation        : fadeout 1s linear;
}

You only need to add fadeOut class to the element

Related questions

Pure JavaScript fade in function

Hi friends i want to fade in a div when i click on another div and for that i am using following code. Code1 works fine but i require to use the Code2. I know there is jQuery but i …

Read More
jQuery .fadeIn() on page load?

I'm trying to set up some code so that I have a that is hidden at first but then fades in after the page is loaded. I have the following HTML code: <div class="hidden"> <p>…

Read More
jQuery fadeIn fadeOut with click

I'm trying to make a div fadeIn when another div is clicked and fadeOut again when another div is clicked (which would be the close button) but my code doesn't work, did I forget something? Here's the CSS: body{ margin: 0; …

Read More