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

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/


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

Tags:

Jquery

Hide

Fadein

Recent Posts