各位大神，高手们，小弟又遇到难题了/这个展开特效如何实现

各位大神，高手们，小弟又遇到难题了/这个展开特效怎么实现
各位大神，高手们，小弟又遇到难题了，
我要做一个展开带动画效果的，我的方法是$("id").show();
单独用这一个是好用的，但是要是多个一起用就不行了，
比如：onload=function(){
$("id_1").show();//这个会好用
$("id_2").show();//这个就没有反应了
}
求高手大神们指点！！！！！.......
以下为我的代码：有点乱。。。
function $(id){
var me = document.getElementById(id);
me.show=function(){
if((me.style.height=="" || me.style.height=="0px") && me.clientHeight == 0 && intervalId == "undefined"){
intervalId=setInterval(timeExecOpen(me,slow),1);
}else{return}
};
return me;
}
//timer
var intervalId = "undefined";
var timeIndex = 0,tn = 0,h = 0;
var timeEntityArray = new Array();
//收缩盒子
function timeExecClose(entity,speed){
if(timeIndex==0){
h = entity.clientHeight;
timeEntityArray.push(new Map(entity,h));
timeIndex++;
}
h<speed?h=0:h -=speed;
entity.style.height = h+"px";
entity.style.overflow = "hidden";
if(h<=0){
timeIndex=0; tn = 0; h = 0;
stopTime();
entity.style.display="none";
}
return function(){
timeExecClose(entity,speed);
}
}
//展开盒子
function timeExecOpen(entity,speed){
if(timeIndex==0){
entity.style.display="block";
if(timeEntityArray.length>0&&timeEntityArray!=null){
for(var i=0;i<timeEntityArray.length;i++){
if(timeEntityArray[i].key==entity){
h = timeEntityArray[i].value;
timeEntityArray.splice(i,1);//查到后删除临时对象
}
}
}else{
h=entity.clientHeight;
}
timeIndex++;
}
(tn+=speed)>h?tn=h:"";
entity.style.height = tn+"px";
entity.style.overflow = "hidden";
if(tn>=h){
timeIndex=0; tn = 0; h = 0;
stopTime();
}
return function(){
timeExecOpen(entity,speed);
}
}
//停止动画
function stopTime(){
window.clearInterval(intervalId);
intervalId = "undefined";
}
//定义一个MAP对象
function Map(key,value){
this.key = key;
this.value = value;
}

------解决方案--------------------
你想要的是这样?

JScript code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
    var slow = 4, normal = 5, fast = 10;//动画特效速度级别
    function $(id) {
        var me = document.getElementById(id);
        me.show = function() {
            if (me.clientHeight == 0 && !me.intervalId) {
                me.intervalId = setInterval(timeExecOpen(me, slow), 1);
            } else {
                return
            }
        };
        me.hide = function() {
            if (((me.style.height != "" && me.style.height != "0px") || me.clientHeight > 0)
                    && !me.intervalId) {
                me.intervalId = setInterval(timeExecClose(me, slow), 1);
            } else {
                return
            }
        };
        return me;
    }
    /*************************************************************
     * Timer 动画计时器特效 *
     *********************************************************/
    //var intervalId = "undefined";
    var height = 300;
    var timeIndex = 0, tn = 0, h = 0;
    var timeEntityArray = new Array();
    //收缩盒子
    function timeExecClose(entity, speed) {
        if (timeIndex == 0) {
            h = entity.clientHeight;
            timeEntityArray.push(new Map(entity, h));
            timeIndex++;
        }
        h < speed ? h = 0 : h -= speed;
        entity.style.height = h + "px";
        entity.style.overflow = "hidden";
        if (h <= 0) {
            timeIndex = 0;
            tn = 0;
            h = 0;
            stopTime(entity);
            entity.style.display = "none";
        }
        return function() {
            timeExecClose(entity, speed);
        }
    }
    //展开盒子
    function timeExecOpen(entity, speed) {
        // 
        var h = entity.clientHeight;
        entity.style.display = "block";
        if(h == 0){
            entity.__h = entity.clientHeight;
        }
        (h += speed) > entity.__h ? h = entity.__h : 0;
        entity.style.height = h + "px";
        entity.style.overflow = "hidden";
        if(h >= entity.__h){
            stopTime(entity);
        }
        return function(){
            timeExecOpen(entity,speed);
        }
    }
    //停止动画
    function stopTime(entity) {
        window.clearInterval(entity.intervalId);
        entity.intervalId = null;
    }
    //定义一个MAP对象
    function Map(key, value) {
        this.key = key;
        this.value = value;
    }

    //初始化调用 的方法-------------------------------------------
    onload = function() {
        // 以下内容打开一下好用,两个同时打开第二个不好用
        $("contant1").show();//这个好用
        $("contant2").show();//两个同时开这个不好用
    }
</script>
</head>

<body>
    <div id="contant1"
        style="height: 300px; width: 200px; border: 1px solid red; overflow: hidden; display: none;">这里是内容1</div>
    <div id="contant2"
        style="height: 300px; width: 200px; border: 1px solid red; overflow: hidden; display: none;">这里是内容2</div>
</body>
</html>

各位大神，高手们，小弟又遇到难题了/这个展开特效如何实现

相关推荐