jquery如何让图片逐渐消失

这篇文章主要介绍“jquery如何让图片逐渐消失”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“jquery如何让图片逐渐消失”文章能帮助大家解决问题。

创新互联-专业网站定制、快速模板网站建设、高性价比庆云网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式庆云网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖庆云地区。费用合理售后完善，十年实体公司更值得信赖。

逐渐消失的方法：1、用fadeOut()，只需设置从可见到消失的毫秒数即可，语法“$("img").fadeOut(毫秒数)”；2、用fadeTo()设置在指定毫秒数中透明度降为0即可，语法“$("img").fadeTo(毫秒数,0)”。

jquery如何让图片逐渐消失

本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。

jquery让图片逐渐消失

方法1：使用fadeOut()---不占位的让图片逐渐消失

fadeOut() 方法使用淡出效果来隐藏被选元素

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("img").fadeOut(3000);
				});
			});
		</script>
	</head>

	<body>
		<img src="img/3.jpg" width="400" /><br><br>
		<button>让图片逐渐消失</button>
	</body>
</html>

jquery如何让图片逐渐消失

方法2：使用fadeTo()---占位的让图片逐渐消失

fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。

只需要将最终的透明度降为0即可。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("img").fadeTo(3000,0);
				});
			});
		</script>
	</head>

	<body>
		<img src="img/3.jpg" width="400" /><br><br>
		<button>让图片逐渐消失</button>
	</body>
</html>

jquery如何让图片逐渐消失

关于“jquery如何让图片逐渐消失”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。

网页名称：jquery如何让图片逐渐消失
文章出自：https://www.cdcxhl.com/article2/pppeoc.html

成都网站建设公司_创新互联，为您提供自适应网站、品牌网站建设、手机网站建设、网站制作、静态网站、Google

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容