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