Fade in an element using Javascript when going from display:none to display:block

Question

I have a script that shows an element when a radio button is pressed. I'm trying to fade in the showing of the element so it's not so abrupt.

The JS:

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

This works fine except for the fade in animation. What am I doing wrong. I have tried combining both statements into one statement, and I have also tried setting the fade in before the display:block, but it doesn't show up at all. Still fairly new to JS, so I'm just trying to figure out what is possible. Thanks in advance

`.fadeIn()` is a jQuery method (maybe in other libraries too), not a JavaScript element method. You didn't tag the question with jQuery, but the way to do it with jQuery is `$("#next").fadeIn(1000);`. If you want to do it with pure JavaScript, you'll have to look up ways to mimic this behavior — Ian, May 31 '13 at 15:18
@EGHDK then check my answer... using JQuery will make your code much simpler and cleaner though.. — rahul maindargi, May 31 '13 at 15:37
Here is the alternative codes : http://stackoverflow.com/questions/19706147/how-to-hide-elements-with-smooth-transition-by-class-with-javascript/ — T.Todua, Jan 22 '14 at 15:33

score 4 · Accepted Answer · answered May 31 '13 at 15:18

4

There's no .fadeIn() method on DOM elements.

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

You're probably seeing some jQuery or other library code. That code must run on the jQuery (or whatever) object that wraps your DOM element.

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

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

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

Then follow the API rules for fetching DOM elements and calling methods.

You can either use the native DOM methods to do the fetching, or just use jQuery, which makes sense if you decided to load it.

answered May 31 '13 at 15:18

Can I call a function from jQuery inside of a javascript script I wrote? – EGHDK May 31 '13 at 15:27
@EGHDK: jQuery is just a library of pre-written JavaScript code. So yes, you just run its functions within your existing JavaScript. I can't say if it makes sense to use jQuery in your project or not. Only you can decide that. – May 31 '13 at 15:31
Any idea why it's not working? I think it's because I'm trying to use jQuery in JS. http://jsfiddle.net/7N5sE/ – EGHDK May 31 '13 at 15:52
@EGHDK: In JS is the only place you *can* use jQuery. :-) Again, all it is is a collection of pre-written JavaScript code. The problem is that your `showHide` function is inside another function... though you can't see it. Look at the menus on the left. You have `onLoad` selected in the second drop menu. This means your code is being defined in a `window.onload` handler. Choose one of the `no wrap` options instead to make your `showHide()` global. – May 31 '13 at 15:58
@EGHDK: If you're going to use a library like jQuery, I'd suggest running through a quick tutorial or two. You'll learn most of what you need to know in a short period of time. – May 31 '13 at 16:06
Really quick, do you know why this doesn't change to red? http://jsfiddle.net/G7LN7/1/ – EGHDK May 31 '13 at 16:37
@EGHDK: jQuery doesn't animate colors. There are likely plugins that do this, or you can also import the jQueryUI library *(or parts of it)* to get color animations. – May 31 '13 at 16:40
Interesting... is there a place where I can see what regular jQuery is limited to? Or what are some things I might try that won't work with Regular jQuery. – EGHDK May 31 '13 at 16:48
@EGHDK: It pretty much comes down to learning the API. If something doesn't work, you look it up in the docs to make sure you're using it properly. If you can't figure it out, then there's StackOverflow to help you. :) For example, as you learn, you'll learn that the `.fade...()` methods are just a wrapper for a call to `.animate()`, and the [`.animate()` docs](http://api.jquery.com/animate/) talks a little bit about colors. – May 31 '13 at 17:09
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/31000/discussion-between-eghdk-and-crazy-train) – EGHDK May 31 '13 at 18:12

lexmihaylov · Answer 2 · 2013-05-31T21:18:13.710

4

You could use CSS3 to develop this effect.

With 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 the display attribute from the style.

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

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

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

edited May 31 '13 at 21:18

answered May 31 '13 at 15:23

lexmihaylov

717
3
8

the op asked for display:block not opacity – NineCattoRules Mar 25 '17 at 01:23

score 2 · Answer 3 · answered May 31 '13 at 15:36

with simple javascript you can do something like this... here i am also printing the opacity value as its being increased...

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();

score 0 · Answer 4 · answered May 31 '13 at 15:19

0

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

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

answered May 31 '13 at 15:19

mck89

18,918
16
89
106

Fade in an element using Javascript when going from display:none to display:block

4 Answers4