JQuery: Start object as hidden in a way that allows .fadeIn() to work

Question

I have an object that I want to start as hidden. I have tried to use each one of these styles one at a time. I have them in a class, not as inline styles.

display:none;

and

opacity:0;filter:alpha(opacity=0);

Now, these both worked obviously, the objects load hidden. The issue is that when I use these, the JQuery .fadeIn() function doesn't work. In fact, when I set the opacity to .5 (50), the fade in only fades in to .5 (50).

So what can I default the object to that will allow the .fadeIn() function to work?

Thanks!

If you only use `display:none` the `fadeIn()` should work. Here's an example: http://jsfiddle.net/n7FzR/1/ — user113716, Sep 18 '10 at 00:44
Are you sure you're not trying to `fadeIn` a child of the element you attach those styles to? — Yi Jiang, Sep 18 '10 at 00:47

score 7 · Accepted Answer · edited May 13 '21 at 05:05

7

Code with working version

HTML

<html>
    <body>
        <p>test</p>
    </body>
</html>

jQuery

$(document).ready(function() {
 $('p').fadeTo('slow', 1, function() {
      // Animation complete.
    });
});

CSS

p {
    display:none;
    opacity:0.0;
    filter:alpha(opacity=0);
}

Live demo

http://jsfiddle.net/2p2v4/

edited May 13 '21 at 05:05

Andrew

307
7
13

answered Sep 18 '10 at 01:04

Pramendra Gupta

14,667
4
33
34

Depending on your layout, you may not want to start with `display:none;`, and luckily this seems to work without it. – Doug Kavendek Jun 22 '12 at 19:51

Praveen Prasad · Answer 2 · 2010-09-18T13:46:28.633

you may use below written or just add your code at the bottom of page

.fadeInOnLoad
{
  display:none;
}

      <div class="fadeInOnLoad">iam visible after page is loaded</div>

      jQuery(function(){
           // your fade in code, call it after dom is ready
            jQuery('.fadeInOnLoad').fadeIn();
        });

i think your problem is

you are calling fade in before the dom elements are created in browser
or using jQuery , visual studio version, as i remember there was some bug in jQuery's opacity thing in visual studio version

JQuery: Start object as hidden in a way that allows .fadeIn() to work

2 Answers2