Search code examples
jqueryhidefadein

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

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!

Solution

  • 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/