<head>
<title>5-1链式动画</title>
<!--引用js文件,把运动代码封装起来 -->
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
ul li
{
list-style: none;
}
li
{
width: 200px;
height: 100px;
background: yellow;
border: 4px solid #000;
fliter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script type="text/javascript" src="Scripts/move.js"></script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>
<script type="text/javascript">
//链式动画:执行完当前动画,调用回调函数执行下一个动画
window.onload = function () {
var li1 = document.getElementById('li1');
li1.onmouseover = function () {
statMove(li1, 'width', 400, function () {
statMove(li1, 'height', 200, function () {
statMove(li1, 'opacity', 100);
});
});
}
li1.onmouseout = function () {
statMove(li1, 'opacity', 30, function () {
statMove(li1, 'height', 100, function () {
statMove(li1, 'width', 200);
});
});
}
}
</script>