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.


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.