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

jquery hide fadein
Nate picture Nate · Sep 18, 2010 · Viewed 8.8k times · Source

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!

Answer

Pramendra Gupta picture Pramendra Gupta · Sep 18, 2010

Hi is 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/

Related questions

JQuery Difference between hide() and fadeOut() , show() and fadeIn()

I am new to jQuery. Currently, I am working with jQuery in my one of Cross Platform Mobile Applications. I need to hide and show some of my Page Contents on respective conditions. I have found following two methods that …

Read More
jquery .hide().fadeIn()

This is my code: $('.items').html(response).hide().fadeIn(); The problem is that when this is loaded the page "jumps" up due to that the .hide().. is there some other way to do this?

Read More
Use jQuery to hide a DIV when the user clicks outside of it

I am using this code: $('body').click(function() { $('.form_wrapper').hide(); }); $('.form_wrapper').click(function(event){ event.stopPropagation(); }); And this HTML: <div class="form_wrapper"> <a class="agree" href="javascript:;">I Agree</a&…

Read More