JavaScript: Fade a Element Using CSS Transition

By Xah Lee. Date: . Last updated: .

This page shows you how to fade a HTML element using JavaScript by CSS transition.



Here's the HTML code:

<div id="id66259"><span style="font-size:6em">★</span></div>

<button id="b1">Fade</button>
<button id="b2">UnFade</button>

Here's the JavaScript code:

var star = document.getElementById("id66259"); = 1; = "opacity 1s";

var button1 = document.getElementById("b1");
var button2 = document.getElementById("b2");

function fade() { = 0;

function unfade() { = 1;

button1.addEventListener("click", fade , false);
button2.addEventListener("click", unfade , false);

This is done by simply setting CSS “transition” property, with changes on opacity. See: CSS: Transition Tutorial.

For pure JavaScript version without using CSS transition, see: JavaScript: Fade a Element.

Simple DOM Examples

  1. JavaScript: Change CSS
  2. JavaScript: Change Element's Content
  3. JavaScript: Create HTML Element
  4. JavaScript: Remove HTML Element

  1. JavaScript: document.write
  2. JavaScript: Image Rollover
  3. JavaScript: Pop-up New Window
  4. JavaScript: Digital Clock
  5. JavaScript: Stopwatch
  6. JavaScript: Fade a Element
  7. JavaScript: Fade a Element Using CSS Transition
  8. JavaScript UI: Shake Element
  9. JavaScript: How to Create Tooltip
  10. JavaScript: Falling Snow Effect
  11. JavaScript Floating Box Following Scroll
Like what you read? Buy JavaScript in Depth
or, buy something from my keyboard store