toxicious Posted May 2, 2012 Share Posted May 2, 2012 I have my divs set to display:none in the css, but when I try to use the fadeIn function nothing happens.If I use .hide().fadeIn() it works, but I want it to be hidden initially, not blink. I tested in both firefox and chrome. Have I missed something?I tried with both visibility: hidden, opacity 0 and some other methods, but none work. Link to comment Share on other sites More sharing options...
justsomeguy Posted May 2, 2012 Share Posted May 2, 2012 You'll need to hide it, then set the display to "block" (or whatever it should be), then fade in. Link to comment Share on other sites More sharing options...
toxicious Posted May 2, 2012 Author Share Posted May 2, 2012 Could you show some example code? For example can I hide it with display:none in the css?Where should I set it to block? Link to comment Share on other sites More sharing options...
dsonesuk Posted May 2, 2012 Share Posted May 2, 2012 (edited) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/ $(document).ready(function() { $("#click_me").toggle(function(){ $("#show_hide").fadeIn(900);}, function(){ $("#show_hide").fadeOut(900); }); }); /*--*//*]]>*/</script> <style type="text/css">#show_hide{display:none;}</style></head><body><a href="javascript:void(0)" id="click_me">Click Me</a><div id="show_hide"> <p>Quis nostrud exercitation excepteur sint occaecat ut enim ad minim veniam. Consectetur adipisicing elit, qui officia deserunt ut labore et dolore magna aliqua. Eu fugiat nulla pariatur.</p> <p>Duis aute irure dolor sed do eiusmod tempor incididunt sunt in culpa. In reprehenderit in voluptate excepteur sint occaecat ullamco laboris nisi. Ut enim ad minim veniam, mollit anim id est laborum. Sed do eiusmod tempor incididunt velit esse cillum dolore. Ut labore et dolore magna aliqua.</p> <p>Ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt in reprehenderit in voluptate consectetur adipisicing elit.</p> <p>Quis nostrud exercitation ut enim ad minim veniam, ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. In reprehenderit in voluptate lorem ipsum dolor sit amet, mollit anim id est laborum. Duis aute irure dolor velit esse cillum dolore qui officia deserunt. Sed do eiusmod tempor incididunt.</p> <p>Duis aute irure dolor velit esse cillum dolore consectetur adipisicing elit. Ut labore et dolore magna aliqua. Qui officia deserunt sed do eiusmod tempor incididunt duis aute irure dolor. Velit esse cillum dolore in reprehenderit in voluptate eu fugiat nulla pariatur.</p> <p>Lorem ipsum dolor sit amet, ut enim ad minim veniam, excepteur sint occaecat. Duis aute irure dolor ut labore et dolore magna aliqua. Mollit anim id est laborum. Quis nostrud exercitation. Consectetur adipisicing elit, in reprehenderit in voluptate duis aute irure dolor.</p></div> </body></html> I can't see the problem, with display:none and $("#show_hide").fadeIn(900); it will or should start fade in instantly and fully show in 900 milliseconds, if you wish a delay before text starts fading in use delay() $("#show_hide").delay(3000).fadeIn(900); Edited May 2, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
toxicious Posted May 3, 2012 Author Share Posted May 3, 2012 (edited) There was only one problem: fu typo'sThanks for taking time helping me Edited May 3, 2012 by toxicious Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now