Question

js怎么让一个div同时有多个运动？求大神解答

现在只能让一个div要不变高要不变宽 不知道怎么同时变。
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name]
}else{
return getComputedStyle(obj,false)[name]
}
}
function startMove(obj,name,iTarget){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
var cur=0;
if(name=="opacity"){
cur=Math.round(parseFloat(getStyle(obj,name))*100)
}else{
cur=parseInt(getStyle(obj,name))
}
var speed=(iTarget-cur)/5
speed=speed>0?Math.ceil(speed):Math.floor(speed)
if(iTarget==cur){
clearInterval(obj.timer)
}else{
if(name=="opacity"){
obj.style.filter="alpha(opacity="+(cur+speed)+")"
obj.style.opacity=(cur+speed)/100
}else{
obj.style[name]=cur+speed+"px"
}
}
},30)
}
这是框架
var oEwmf=document.getElementById("ewm")
var oEwm=oEwmf.getElementsByTagName("img")[0]
oEwm.onmouseover=function(){
startMove(this,"height",180)
}
oEwm.onmouseout=function(){
startMove(this,"height",78)
}
这是需要执行的 。
就是这...框架哪里改改？ 求大神解答

Answer 1

改成这样就行了：不要把timer绑定在obj上，这样就一起都清除了，放到闭包里面，这样就只会清除和那个属性变化相关的timer

function getStyle(obj, name) {
  if (obj.currentStyle) {
    return obj.currentStyle[name]
  } else {
    return getComputedStyle(obj, false)[name]
  }
}

function startMove(obj, name, iTarget) {
// this_timer会在动作完成后，在闭包中清除
  var this_timer = setInterval(function() {
    var cur = 0;
    if (name == "opacity") {
      cur = Math.round(parseFloat(getStyle(obj, name)) * 100)
    } else {
      cur = parseInt(getStyle(obj, name))
    }
    var speed = (iTarget - cur) / 5
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
    if (iTarget == cur) {
    // 释放计时器
      clearInterval(this_timer)
    } else {
      if (name == "opacity") {
        obj.style.filter = "alpha(opacity=" + (cur + speed) + ")"
        obj.style.opacity = (cur + speed) / 100
      } else {
        obj.style[name] = cur + speed + "px"
      }
    }
  }, 30)
}
var oEwmf=document.getElementById("ewm")
var oEwm=oEwmf.getElementsByTagName("img")[0]
oEwm.onmouseover = function() {
  startMove(this, "height", 180)
  startMove(this, "width", 180)
}
oEwm.onmouseout = function() {
  startMove(this, "height", 80)
  startMove(this, "width", 80)
}