<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.imgclass
{
width: 300px;
height: 300px;
border: solid 1px red;
position:relative; left:100px; top:100px;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('img').click(function () {
//$('img').css({width:'500px',height:'500px'});
//$('img').animate({width:'500px',height:'500px'}, 2000);
$(this).animate({ width: '500px' }, 2000).animate({ height: '500px' }, 2000).animate({ left: '+=100px' }, 2000).animate({ top: '-=100px' }, 2000);
})
$('#Button1').click(function () {
$('#spinfo').animate({ fontSize: '40px' }, 2000);
})
//停止动画
$('#Button2').click(function () {
//$('#spinfo').stop();
//当一个元素有一个动画队列时,停止的只是当前正在执行的动画,后面的动画还会继续执行
$('img').stop();
})
$('#Button3').click(function () {
$('img').delay(2000).hide(2000);
})
})
</script>
</head>
<body>
<input id="Button1" type="button" value="button" />
<input id="Button2" type="button" value="停止" />
<input id="Button3" type="button" value="延迟" />
<span id="spinfo">好热</span>
<br />
<img src="images/3.jpg" class="imgclass" />
</body>
</html>