                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

按照JS動畫課程改了下鏈式動畫，但為什么這個會無法執(zhí)行？只有第一組的width能夠運動，后面的都不行，這是為什么？

<!doctype html>

<html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

ul,li{

list-style: none;

}

ul li {

width: 200px;

height: 100px;

background:yellow;

margin-bottom: 20px;

border: 4px solid #000;

filter: alpha(opacity: 30);

opacity: 0.3;

}

</style>

</head>

<body>

<ul>

</ul>

window.onload = function(){

var Li = document.getElementById("li1");

Li.onmouseover = function(){

//startMove(oLi,{width:400,height:200,opacity:100});

//function startMove(obj,json,fn);

startMove(Li,{width:400},startMove(Li,{height:200},startMove(Li,{opacity:100})));

};

Li.onmouseout = function(){

}

</script>

</body>

</html>

陳大魚頭

2016-04-12

源自：JS動畫效果 6-2

關注問題我要回答

858

操作

收起

3 回答

從此浪跡天涯了無牽掛回答被采納 +3 積分
2016-04-18

你試一下把move.js里面的var flag = true；挪動到定時器里面。因為鏈式調(diào)用，如果調(diào)用結(jié)束第一個，?

if(icur !== json[attr]){

flag=false;

}

if(attr=='opacity'){

obj.style.filter='alpha(opacity:'+(icur+speed)+')';

obj.style.opacity = (icur+speed)/100;

}

else{

obj.style[attr] = icur+speed+'px';

}

這里因為沒辦法使定時器停止，因為沒有flag=true；之前的flag=true有但是是在定時器外面，你本身在定時器里面出不去，所以沒辦法停止只能無限循環(huán)，不過，看不出來循環(huán)，因為這時候speed=0，所以也就是變化的不變。

要想進行下一個調(diào)用，唯一的辦法就是在定時器一開始，給flag設定為true。

因為你后面有icur !== json[attr]的判斷，所以，只要你目標值跟當前值不同的話，在中間還能矯正回來，就不會造成意外的中斷。

3 回復有任何疑惑可以回復我~

收起回答

#1

陳大魚頭提問者

非常感謝！

2016-04-27 回復有任何疑惑可以回復我~

慕用9727068
2016-04-26

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
?? ?<title>5.鏈式動畫</title>
</head>
<style type="text/css">
*{
?? ?margin: 0 0;
?? ?padding: 0 0;
}
ul,li{
?? ?list-style: none;
}
ul li{
?? ?width: 200px;
?? ?height: 100px;
?? ?background:yellow;
?? ?margin-bottom:20px;
?? ?border:4px solid #000;
?? ?filter:alpha(opacity:30);
?? ?opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload=function(){
?? ?var Li1=document.getElementById("li1");
?? ?Li1.onmouseover=function(){
?? ??? ?startMove(Li1,"width",400,function(){
?? ??? ??? ?startMove(Li1, 'height', 200)
?? ??? ?})
?? ?}
?? ?Li1.onmouseout=function(){
?? ??? ?startMove(Li1, "width",200,function(){
?? ??? ??? ?startMove(Li1, 'height', 100)
?? ??? ?})
?? ?}
}
var timer=null;
function startMove(obj,attr,iTarget,fn){
?? ?clearInterval(obj.timer)
?? ?obj.timer =setInterval(function(){
?? ??? ?var icur=0;
?? ??? ?if (attr=='opacity') {
?? ??? ??? ?icur=Math.round(parseFloat(getStyle(obj,attr))*100)
?? ??? ?}
?? ??? ?else{
?? ??? ??? ?icur=parseInt(getStyle(obj,attr));
?? ??? ?}
?? ??? ?if (icur>iTarget) {
?? ??? ??? ?speed=Math.floor((iTarget-icur)/10)
?? ??? ?}
?? ??? ?else{
?? ??? ??? ?speed=Math.ceil((iTarget-icur)/10)
?? ??? ?}
?? ??? ?if(icur==iTarget){
?? ??? ??? ?clearInterval(obj.timer)
?? ??? ??? ?if (fn) {
?? ??? ??? ??? ?fn();
?? ??? ??? ?}
?? ??? ?}
?? ??? ?else{
?? ??? ??? ?if (attr=='opacity') {
?? ??? ??? ??? ?obj.style.filter='alpha(opacity:'+(icur+speed)+')'
?? ??? ??? ??? ?obj.style.opacity=(icur+speed)/100;
?? ??? ??? ?}
?? ??? ??? ?else{
?? ??? ??? ??? ?obj.style[attr]=icur+speed+'px';?? ??? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ?}
?? ?},30)
}
function getStyle(obj,attr){
?? ?if (obj.currentStyle) {
?? ??? ?return obj.currentStyle[attr];
?? ?}
?? ?else{
?? ??? ?return getComputedStyle(obj,false)[attr];
?? ?}
}
</script>
<body>
?? ?<ul>
?? ??? ?<li id="li1"></li>
?? ?</ul>
</body>
</html>