Add a fadeIn to a switch from hide to block display

Question

I have a

<a onclick="document.getElementById('massage').style.display = 'block';">Button</a>

And I want to add a fadeIn to the function, but dont know how.

Answer 1

You have two options:

1. A css3 opacity animation - only suitable for HTML5 enabled browsers i.e. IE9+. Apply this by adding the css class fade to your element.

   .fade { opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }

2.) Use jquerys fadein function. Which supports older browsers.

http://api.jquery.com/fadeIn/

You will need to learn jQuery of course if you don't know it but this is worth doing I think.

Hope that helps