FadeIn animation for div with display:none property

Question

I am having issues implementing a fadeIn function for one of my div tags that has a display:none property attached to it.

What would be the best way to go about having the div tag appear and then fade in? I am pretty adamant about keeping the display:none property.

This is what I have tried:

<div class="graphs_line_based clearfix" style="display:none" id = "test_id">

And then in my .script file:

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

It simply does not play the animation. Any help/suggestions would be appreciated!

score 2 · Accepted Answer · answered Sep 28 '14 at 18:48

2

If you are trying to use the jQuery function, .fadeIn, you have to call refer to the DOM object like this:

$('#test_id').fadeIn(1000);

answered Sep 28 '14 at 18:48

Qiming

1,664
1
14
18

That was it. Silly of me. Thanks guys! – boisterouslobster Sep 28 '14 at 18:55

score 1 · Answer 2 · answered Sep 28 '14 at 18:48

1

I think you meant to say:

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

answered Sep 28 '14 at 18:48

Mark Fitzpatrick

1,624
1
11
8

score 0 · Answer 3 · edited May 23 '17 at 10:33

Try this solution if you want use javascript

<div class="graphs_line_based clearfix" style="display:block" id = "test_id">aiuto</div>

fade(document.getElementById('test_id'));

function fade(element) {
    var op = 0.1;  // initial opacity
    var timer = setInterval(function () {
        if (op >=1){
            clearInterval(timer);
            //element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
    }, 50);
}

FadeIn animation for div with display:none property

3 Answers3