<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#d1 {
width:100px;
height:100px;
position:absolute;
background-color:red;
left:10px;
top:50px;
filter:alpha(opacity=50)
}
img {
width:150px;
height:100px;
}
</style>
<script src="Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("#d1").animate({ "width": 300, "height": 300, "opacity": 1 }, 3000, function () {
//动画执行完毕 调用该方法
$(this).css("background-color","blue");
});
});
$("#btn1").click(function () {
$("#d1").animate({"left":"-=80"},1000);
});
$("#btn2").click(function () {
$("#d1").animate({"left":"+=80"},1000);
});
$("img").hover(function () {
$(this).animate({ "width":270,"height":180},"slow");
}, function () {
$(this).animate({ "width": 150, "height": 100 }, "slow");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn" value="动画" />
<input type="button" id="btn1" value="向左" />
<input type="button" id="btn2" value="向右" />
</div>
<div id="d1"></div>
</form>
<table>
<tr>
<td>
<img src="Images/01.jpg" /></td>
<td>
<img src="Images/02.jpg" /></td>
<td>
<img src="Images/03.jpg" /></td>
</tr>
</table>
</body>
</html>