Advanced Search

jQuery element opacity fade in over time (without fadeIn();)

/ Published in: jQuery
Save to your folder(s)
A quick demonstration of fading an element in over a set time by starting opacity at 0 and incrementing it + .1 over time.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html>
  2. <head>
  3. <title>Fade</title>
  4. <style type="text/css">
  5. #fade {
  6. 	margin: 0 auto;
  7. 	height: 200px;
  8. 	width: 200px;
  9. 	background-color: purple;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14.  
  15. <div id="fade">
  16. </div>
  17.  
  18. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  19. <script type="text/javascript">
  20.  
  21. $(function() {
  22.  
  23. 	var opacity = 0;
  24.  
  25. 	var interval = setInterval(function() {
  26. 		opacity += .1;
  27.  
  28. 		$('#fade').css('opacity', opacity);
  29.  
  30. 		if (opacity === 1) {
  31. 			clearInterval(interval);
  32. 		}
  33. 	}, 50);
  34.  
  35.  
  36. });
  37.  
  38. </script>
  39.  
  40. </body>
  41. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.