按照JS动画课程改了下链式动画，但为什么这个会无法执行？只有第一组的width能够运动，后面的都不行，这是为什么？
陈大鱼头
2016-04-12 16:09
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>链式运动</title>
<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>
<script src="move.js"></script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
<script>
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>
3回答
-
- 从此浪迹天涯了无牵挂
- 2016-04-18 02:42:03
你试一下把move.js里面的var flag = true；挪动到定时器里面。因为链式调用，如果调用结束第一个，
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有但是是在定时器外面，你本身在定时器里面出不去，所以没办法停止只能无限循环，不过，看不出来循环，因为这时候speed=0，所以也就是变化的不变。
要想进行下一个调用，唯一的办法就是在定时器一开始，给flag设定为true。
因为你后面有icur !== json[attr]的判断，所以，只要你目标值跟当前值不同的话，在中间还能矫正回来，就不会造成意外的中断。
-
- 慕用9727068
- 2016-04-26 21:49:36
<!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>试试这个
-
- 路漫漫兮2015
- 2016-04-12 20:35:47
startMove(Li,{width:400},startMove(Li,{height:200},startMove(Li,{opacity:100})));这个传的参数不对，试试。
startMove(Li,{'width':400},function(){startMove(Li,{'height':200},function(){startMove('opacity':100)}))
JS动画效果
113925 学习 · 1443 问题
相似问题