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

各位大神，高手们，小弟又遇到难题了，
我要做一个展开带动画效果的，我的方法是$("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;
}

解决方案 »

  1.   

    应该是
    //timer
    var intervalId = "undefined";共用了或错乱了
      

  2.   

    先在控制台下看看有没有报错？没有报错的话，问题可能出在共用了setInterval()返回的id值。整理一份可供测试的html代码发上来。
      

  3.   

     $("id_1").show(); 执行这个方法的时候程序进入了 intervalId=setInterval(timeExecOpen(me,slow),1);执行正常，当show第二个元素的时候 $("id_2").show(); 程序进入了else 都执行了return 肯定就显示出不来了
      

  4.   

    在调用show方法前用clearInterval把intervalId清掉吧
      

  5.   

    以下是我测试的代码，放到html文件里就能用，望高手帮忙看一下，指点一二，谢谢。
    <!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 && intervalId == "undefined"){
    intervalId=setInterval(timeExecOpen(me,slow),1);
    }else{return}
    };
    me.hide=function (){
    if(((me.style.height!="" && me.style.height!="0px") || me.clientHeight>0) && intervalId == "undefined"){
      intervalId=setInterval(timeExecClose(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;
    }
    //初始化调用 的方法-------------------------------------------
    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>
      

  6.   


    <!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 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) {
    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(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>
      

  7.   

    你想要的是这样?<!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>