jQuery元素不透明度随时间逐渐淡入（没有fadeIn（）；）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery元素不透明度随时间逐渐淡入（没有fadeIn（）；）相关的知识，希望对你有一定的参考价值。

A quick demonstration of fading an element in over a set time by starting opacity at 0 and incrementing it + .1 over time.
  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>

以上是关于jQuery元素不透明度随时间逐渐淡入（没有fadeIn（）；）的主要内容，如果未能解决你的问题，请参考以下文章

jQuery：淡入/淡出+动画元素

jQuery-4.动画篇---淡入淡出效果

jQuery动画（显示隐藏，淡入淡出，滑动）

jQuery特效

JQuery动画

[ jquery 效果 fadeToogle([speed,[easing],[fn]]) ] 此方法用于通过切换不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数(代码