Question

14

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

rated 0 times [ 18] [ 4] / answers: 1 / hits: 24429 / 11 Years ago, fri, may 31, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jimmieo

Add To Favorites

Follow

Total Points: 515

Total Questions: 102

Total Answers: 110

Location: Kazakhstan

Member since Mon, Sep 26, 2022

2 Years ago

jimmieo questions

1 Chrome Dev Tools Elements Tab stopped working (can't right click any DOM Node and hover over Dom Node doesnt highlight anything)

Fri, Mar 4, 22, 00:00, 2 Years ago

1 React Redux toolkit: type is not assignable to type 'CaseReducer< type, { payload: any; type: string; }>

Fri, Aug 13, 21, 00:00, 3 Years ago

1 react-query getting old data

Tue, Feb 23, 21, 00:00, 3 Years ago

1 FirebaseError: Function Query.where() requires a valid third argument, but it was undefined

Mon, Mar 11, 19, 00:00, 5 Years ago

1 How to make < tr> clickable as a link instead of cell?

Thu, Jan 31, 19, 00:00, 5 Years ago

View All

answered 11 Years ago beatriceisabelad · Accepted Answer

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.