animate
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
#dtest{
width: 50px;
height: 50px;
background-color: red;
position: relative;
margin: 30px auto;
border: 1px solid #ccc;
}
</style>
<title>练习题</title>
</head>
<body>
<input type="button" id="inp1" value="点击左移" />
<input type="button" id="inp2" value="点击右移" />
<div id="dtest"></div>
<script type="text/javascript">
$(function(){
$("#inp1").bind('click',function() {
$("#dtest").animate({
left: "-=50px",
width: '100px',
height: '100px'
}, 5000)
});
$("#inp2").bind('click',function() {
$("#dtest").animate({
left: "+=50px",
width: '50px',
height: '50px'
}, 5000)
});
})
</script>
</body>
</html>
