Javascript fading in an element when moving from the screen: none to display: block

Question

I have a script that shows an element when a radio button is pressed. I am trying to disappear when showing an element so that it is not so sharp.

JS:

document.getElementById('next').style.display = 'block'; document.getElementById('next').fadeIn(1000); 

This works great except for the animation. What am I doing wrong. I tried to combine both statements into a single statement, and I also tried to set the attenuation before displaying: block, but it doesn't display at all. Still quite new to JS, so I'm just trying to figure out what is possible. thanks in advance

Answer 1

There is no .fadeIn() method for DOM elements.

 document.getElementById('ques_2').fadeIn(1000); 

You probably see some jQuery code or some other library code. This code should execute on a jQuery object (or whatever) that wraps your DOM element.

---

Another approach that will work in modern browsers would be to use the CSS3 transition. You could apply JavaScript to the new class and let CSS take care of the visual effect.

---

If you want to use the jQuery library, you need to import it into your page. For example, put this in the head your page:

 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

Then follow the API rules to retrieve the DOM elements and call methods.

You can use your own DOM methods to extract or just use jQuery, which makes sense if you decide to download it.

Answer 2

You can use CSS3 to develop this effect.

Using this HTML:

 <div id='fader'></div> 

and this style:

 #fader { opacity:0; -webkit-transition: opacity 2s; -moz-transition: opacity 2s; -o-transition: opacity 2s; transition: opacity 2s; } 

Remove display attribute from style.

After that, you can use JavaScript to change the style, and the effect will automatically happen:

 document.getElementById('fader').style.opacity = 1; 

DEMO: http://jsfiddle.net/AUak7/

Answer 3

with simple javascript you can do something like this ... here I also print the opacity value as it increases ...

Demo

 function show() { document.getElementById('next').style.opacity = (parseFloat(document.getElementById('next').style.opacity) + 0.1); document.getElementById('value').innerHTML = (document.getElementById('next').style.opacity); if (document.getElementById('next').style.opacity < 1) { setTimeout(show, 400); } } function fadeIn() { document.getElementById('next').style.opacity = 0; document.getElementById('next').style.display = 'block'; setTimeout(show, 400); } fadeIn(); 

Answer 4

FadeIn is a jQuery function, but you are using simple javascript. Turn on jQuery and use:

 $("#next").fadeIn(1000);