<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: aquamarine;
margin: 10px;
border: 10px solid deeppink;
float: left;
}
</style>
</head>
<body>
<div id="div1"></div>
<script src="move.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var oDiv1 = document.getElementById("div1");
oDiv1.onmouseover = function() {
// startMove(oDiv1, 50, "borderLeftWidth",function(){
// startMove(oDiv1, 400, "width",function(){
// startMove(oDiv1, 400, "height",function(){
// startMove(oDiv1, 50, "opacity");
// });
// });
// });
startMove(oDiv1,{borderLeftWidth:50,width:400,height:400,opacity:50});
}
oDiv1.onmouseout = function() {
// startMove(oDiv1, 100, "opacity",function(){
// startMove(oDiv1, 200, "height",function(){
// startMove(oDiv1, 200, "width",function(){
// startMove(oDiv1, 10, "borderLeftWidth");
// });
// });
// });
startMove(oDiv1,{opacity:100,height:200,width:200,borderLeftWidth:10});
}
</script>
</body>
</html>