Jump to content

fadeIn doesn't unhide div


toxicious
 Share

Recommended Posts

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

<!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 by dsonesuk
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...