提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery效果-隐藏与显示 小方块的移除

jQuery 显示 效果 隐藏 移除
2023-09-11 14:22:19 时间

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jquery</title>
		<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
		<style>
			div {
				width:50px;
				height:50px ;
				margin: 20px;
				background-color:blueviolet ;
			}
		</style>
	</head>
	<body>
		<script>
		for (var i=0;i<5;i++) {
                 //创建div
			$("<div>").appendTo(document.body); 
		}
		$("div").click(function(){ 
			$(this).hide(3000,function(){
				$(this).remove();
			});
		})
		
		</script>
	</body>
</html>

　　效果：

 

 

2017-09-21 12:29:16 

 

相关文章