我想讓物體運動和透明度同時實現(xiàn)，但是不是我想要的那種效果，哪位大神幫忙看一下
<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title></title>
??? <style type="text/css">
??????? body,ul,li{
??????????? margin: 0;
??????????? padding: 0;
??????? }
??????? ul,li{
??????????? list-style: none;
??????? }
??????? ul li{
???????? width: 200px;
??????????? height: 100px;
??????????? background-color: red;
??????????? margin-bottom: 20px;
??????????? filter:alpha(opacity:30);
??????????? opacity:0.3;
??????? }
??? </style>
??? <script>
??????? window.onload= function () {
??????????? var Ali=document.getElementsByTagName('li');
??????????? for(var i=0;i<Ali.length;i++){
??????????????? Ali[i].alpha=30;
??????????????? Ali[i].timer=null;
??????????????? Ali[i].onmouseover= function () {
??????????????????? startMove(this, 400,100);
??????????????? };
??????????????? Ali[i].onmouseout= function () {
??????????????????? startMove(this,200,30);
??????????????? }
??????????? }
??????? };
??????? function startMove(obj,iTarget,iTargetSpeed) {
??????????? clearInterval(obj.timer);
??????????? var speedAlpha=0;
??????????? obj.timer=setInterval(function () {
??????????????????? if(obj.alpha>iTargetSpeed){
??????????????????????? speedAlpha=-10;
??????????????????? }else{
??????????????????????? speedAlpha=10;
??????????????????? }
????????????? ?
??????????????????? if(obj.alpha==iTargetSpeed){
??????????????????????? clearInterval(obj.timer);
??????????????????? }else {
??????????????????????? obj.alpha += speedAlpha;
//??????????????????? alpha=alpha+speed;
??????????????????????? obj.style.filter = 'alpha(opacity:' + obj.alpha + ')';
??????????????????????? obj.style.opacity = obj.alpha / 100;
??????????????????????? var speed=(iTarget-obj.offsetWidth)/8;
??????????????????????? speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
??????????????????????? obj.style.width=obj.offsetWidth+speed+'px';
??????????????????? }
??????????? },30);
??????? }
??? </script>
</head>
<body>
<ul>
??? <li></li>
??? <li></li>
??? <li></li>
</ul>
</body>
</html>
2016-08-03
動畫結束條件判斷有問題。修改代碼如下：
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? body,ul,li{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? ul,li{
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? ul li{
? ? ? ? ?width: 200px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: red;
? ? ? ? ? ? margin-bottom: 20px;
? ? ? ? ? ? filter:alpha(opacity:30);
? ? ? ? ? ? opacity:0.3;
? ? ? ? }
? ? </style>
? ? <script>
? ? ? ? window.onload= function () {
? ? ? ? ? ? var Ali=document.getElementsByTagName('li');
? ? ? ? ? ? for(var i=0;i<Ali.length;i++){
? ? ? ? ? ? ? ? Ali[i].alpha=30;
? ? ? ? ? ? ? ? Ali[i].timer=null;
? ? ? ? ? ? ? ? Ali[i].onmouseover= function () {
? ? ? ? ? ? ? ? ? ? startMove(this, 400,100);
? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? Ali[i].onmouseout= function () {
? ? ? ? ? ? ? ? ? ? startMove(this,200,30);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? function startMove(obj,iTarget,iTargetSpeed) {
? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? var speedAlpha=0;
? ? ? ? ? ? obj.timer=setInterval(function () {
? ? ? ? ? ? ? ? ? ? if(obj.alpha>iTargetSpeed){
? ? ? ? ? ? ? ? ? ? ? ? speedAlpha=-10;
? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? speedAlpha=10;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if(obj.alpha==iTargetSpeed && obj.offsetWidth==iTarget){
? ? ? ? ? ? ? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? ? ? ? ? }else {
? ? ? ? ? ? ? ? ? ? ? ? obj.alpha += speedAlpha;
// ? ? ? ? ? ? ? ? ? ?alpha=alpha+speed;
? ? ? ? ? ? ? ? ? ? ? ? obj.style.filter = 'alpha(opacity:' + obj.alpha + ')';
? ? ? ? ? ? ? ? ? ? ? ? obj.style.opacity = obj.alpha / 100;
? ? ? ? ? ? ? ? ? ? ? ? var speed=(iTarget-obj.offsetWidth)/8;
? ? ? ? ? ? ? ? ? ? ? ? speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
? ? ? ? ? ? ? ? ? ? ? ? obj.style.width=obj.offsetWidth+speed+'px';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? },30);
? ? ? ? }
? ? </script>
</head>
<body>
<ul>
? ? <li></li>
? ? <li></li>
? ? <li></li>
</ul>
</body>
</html>