js控制div的高

Question

我想做个动画效果,用js控制div的高
,让它由大变小 在由小变大,可是一直都不成功.
不知道问题出在哪里,急死了function ChildHide(childName){
    var child = document.getElementById(childName);
    var tempheight = child.offsetHeight;    for (var i = tempheight; i >= 0; i--) {
        child.style.height = i + "px";
    }
    for (var j = 0; j <= tempheight; j--) {
        child.style.height = j + "px";
    }
}

Answer 1

tempheight 也就数百像素，for循环在几毫秒内就结束了，所以看不到效果。常规的动画都是有计时器的，设定时间间隔来执行大小、位置的修改动作，以实现动画效果。

Answer 2

建议使用JQUERY 框架来做，实用又简单。
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );

Answer 3

function ChildHide(childName){
    var child = document.getElementById(childName);
    var tempheight = child.offsetHeight;    for (var i = tempheight; i >= 0; i--) {
        setTimeout(child.style.height = i + "px",1000);
    }
    for (var j = 0; j <= tempheight; j++) {
        setTimeout(child.style.height = j + "px",1000);
    }
}
加了这个也没用- -

Answer 4

......
能不注释一下,没用过JQUERY ,js也是刚学没多久

Answer 5

这样当然没用，setTimeout是异步执行，简单的加延时只是把变化的时间整体延迟一下而已，仍然是一瞬间完成一般来说 延时+递归才能完成动画效果

Answer 6

jquery 是一个 JS的框架；JS能做到的,Jquery都能做到。 
$("#block").animate({height: "200px"}, 1000 );
#block ：DOM元素的ID
1000  ： 效果的播放速度单位是（毫秒）
{ } : 变化对象，填写CSS属性的最终变化值。 如上{height: "200px"} 即是 对象的高度最终变为高度200px
要使用JQUERY 请先引用 jquery框架

Answer 7

用这个吧，你那个结构就实不现，代码已调试function ChildHide(childName){
    var child = document.getElementById(childName);
    var tempheight = child.offsetHeight;
   //alert(child+','+tempheight);   subheight(child,tempheight,function(){alert("success");});
}
   function subheight(obj,value,callBack)//参数分别为html元素对象，初始高度，回调函数
   {
     if(value<0) //递归出口条件
     {
       callBack();
       return;
     }
     obj.style.height=value;
     setTimeout(function(){ subheight(obj,value-10,callBack);},50);
   }