Menu
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!
826
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/
67
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
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
