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
– Ian, Commented May 31, 2013 at 15:18
@EGHDK then check my answer... using JQuery will make your code much simpler and cleaner though.. — rahul maindargi
– rahul maindargi, Commented May 31, 2013 at 15:37

lexmihaylov · Accepted Answer · 2013-05-31 21:18:13Z

5

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, 2013 at 21:18

answered May 31, 2013 at 15:23

lexmihaylov

7373 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NineCattoRules Over a year ago

the op asked for display:block not opacity

user2437417 · Accepted Answer · 2013-05-31 15:18:26Z

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, 2013 at 15:18

user2437417

10 Comments

EGHDK Over a year ago

Can I call a function from jQuery inside of a javascript script I wrote?

user2437417 Over a year ago

@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.

EGHDK Over a year ago

Any idea why it's not working? I think it's because I'm trying to use jQuery in JS. jsfiddle.net/7N5sE

user2437417 Over a year ago

@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.

user2437417 Over a year ago

@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.

|

rahul maindargi · Accepted Answer · 2013-05-31 15:36:15Z

2

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

answered May 31, 2013 at 15:36

rahul maindargi

5,7052 gold badges18 silver badges23 bronze badges

Comments

mck89 · Accepted Answer · 2013-05-31 15:19:14Z

0

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

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

answered May 31, 2013 at 15:19

mck89

19.3k17 gold badges93 silver badges111 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

10 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related