<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding: 0;}
.one{width: 400px;background: gray;margin: 10px auto}
input{width: 300px;height: 30px;margin-top: 10px;}
textarea{width: 300px;height: 80px;margin-top: 10px;}
label{vertical-align: top;margin-top: 10px;display: inline-block;}
li{list-style: none;}
button{margin-left: 50px;width: 100px;height: 30px;}
</style>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
</head>
<body>
<div class="one">
<label>姓名：</label><input type="text"><br />
<label>内容：</label><textarea></textarea><br />
<button>发布</button>
<h1>留言表</h1>
<ul></ul>
</div>
<script type="text/javascript">
$(function(){
$("button").on("click",function(){
//创建元素
var labelObj = $("<li><p></p><p></p><a href=javascript:void(0)'>删除</a></li>");
labelObj.find("p").eq(0).text($("input").val());
labelObj.find("p").eq(1).text($("textarea").val());
$("input").val("");
$("textarea").val("");
$("ul").prepend(labelObj);
var h=labelObj.height();
labelObj.height(0);
labelObj.animate({
height:h,
})
labelObj.find("a").on("click",function(){
$(this).parent().animate({
height:0,
},function(){
$(this).remove();
})
})
})
})
</script>
</body>
</html>
