CODEWITHSUNDEEP
javascript
EGHDK
EGHDK

Reputation: 18130

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

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

Upvotes: 8

Views: 27373

Answers (4)

lexmihaylov
lexmihaylov

Reputation: 737

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/

Upvotes: 5

rahul maindargi
rahul maindargi

Reputation: 5625

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

Upvotes: 2

mck89
mck89

Reputation: 19241

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

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

Upvotes: 0

user2437417
user2437417

Reputation:

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.

Upvotes: 4

Related Questions