fade effect using javascript no jquery?

by

Here is a pure implementation of fade in and fade out effect using JavaScript.

  1. Make use of CSS Opacity property

  2. During fade out process, we reduce the opacity value from 0.9 to 0

  3. Similarly fade in process increase the 0.0 to 0.9

  4. For IE its 10 to 90

  5. Use setTimeout() function to call the fade function recursively with delay and increase / decrease opacity value to achieve the fade effect

      function fadeOut(id,val){ if(isNaN(val)){ val = 9;}
  document.getElementById(id).style.opacity='0.'+val;
  //For IE
  document.getElementById(id).style.filter="alpha(opacity="+val+'0)';
  if(val>0){
    val--;
    setTimeout('fadeOut("'+id+'",'+val+')',90);
  }else{return;}
}

function fadeIn(id,val){
// ID of the element to fade, Fade value[min value is 0]
  if(isNaN(val)){ val = 0;}
  document.getElementById(id).style.opacity='0.'+val;
  //For IE
  document.getElementById(id).style.filter="alpha(opacity="+val+'0)';
  if(val<9){
    val++;
    setTimeout('fadeIn("'+id+'",'+val+')',90);
  }else{return;}
}

Cheers
-Clain

More Related Contents:

  1. JS hide function error
  2. How to change css of a div with a certain id when hovering over a certain element anywhere in the whole webpage?
  3. Get the longest text in HTML document using Jquery or javascript
  4. Javascript counting all the characters from a HTML document
  5. JSFiddle code not working in my own page
  6. How to disable scroll without hiding it?
  7. Changing nav-bar color after scrolling?
  8. jQuery: Get selected element tag name
  9. How to dynamically create ‘@-Keyframe’ CSS animations?
  10. Infinity Loop Slider Concepts
  11. Text blinking jQuery
  12. width/height after transform
  13. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  14. jQuery vs document.querySelectorAll
  15. How to ONLY trigger parent click event when a child is clicked
  16. How can I detect when a new element has been added to the document in jquery?
  17. JavaScript Loading Screen while page loads
  18. Change text color based on brightness of the covered background area?
  19. jQuery – Sticky header that shrinks when scrolling down
  20. Show text letter by letter
  21. collapse and expand tabs jquery / simple accordion
  22. Large dynamically sized html table with a fixed scroll row and fixed scroll column
  23. Is it possible to do mathematics inside CSS?
  24. Select a row from html table and send values onclick of a button
  25. jQuery: Change element type from hidden to input
  26. Gaussian Blur onHover Using jQuery
  27. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  28. Wrapping lists into columns
  29. Possible to reverse a css animation on class removal?
  30. In jQuery mobile, what’s the diff between tap and vclick?

Leave a Comment