返回
首页 > 儿童教育

jquery怎么让图片逐渐消失

时间: 2023-02-01

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

本教程操作环境: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>

方法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教程、web前端】

以上就是jquery怎么让图片逐渐消失的详细内容

猜你喜欢

版权所有 Copyright©2023 餐饮美食网 版权所有

粤ICP备15109582号

联系邮箱:187348839@qq.com