Tengo un div que abro y cierro con un enlace. El contenido del div se carga via ajax. El javascript para la animación del slide para abrir y cerrar el div funciona bien, también el javascript que carga el contenido desde un archivo php, pero el problema es que el contenido del div cargado con ajax no respeta la animación y aparece encima. El div realiza la animación correctamente pero el texto aparece de golpe.
Este es el javascript que estoy usando, "masdiv" es la función que llama al resto cuando apreto el enlace:
Código Javascript :
var timerlen = 5; var slideAniLen = 200; var timerID = new Array(); var startTime = new Array(); var obj = new Array(); var endHeight = new Array(); var moving = new Array(); var dir = new Array(); function slidedown(objname){ if(moving[objname]) return; if(document.getElementById(objname).style.display != "none") return; moving[objname] = true; dir[objname] = "down"; startslide(objname); } function slideup(objname){ if(moving[objname]) return; if(document.getElementById(objname).style.display == "none") return; moving[objname] = true; dir[objname] = "up"; startslide(objname); } function startslide(objname){ obj[objname] = document.getElementById(objname); obj[objname].style.display = "block"; endHeight[objname] = parseInt(obj[objname].offsetHeight); obj[objname].style.display = "none"; startTime[objname] = (new Date()).getTime(); if(dir[objname] == "down"){ obj[objname].style.height = "1px"; } obj[objname].style.display = "block"; timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen); } function slidetick(objname){ var elapsed = (new Date()).getTime() - startTime[objname]; if (elapsed > slideAniLen) endSlide(objname) else { var d =Math.round(elapsed / slideAniLen * endHeight[objname]); if(dir[objname] == "up") d = endHeight[objname] - d; obj[objname].style.height = d + "px"; } return; } function endSlide(objname){ clearInterval(timerID[objname]); if(dir[objname] == "up") obj[objname].style.display = "none"; obj[objname].style.height = endHeight[objname] + "px"; delete(moving[objname]); delete(timerID[objname]); delete(startTime[objname]); delete(endHeight[objname]); delete(obj[objname]); delete(dir[objname]); return; } function masdiv(objname){ if(document.getElementById(objname).style.display == "none"){ slidedown(objname); }else{ slideup(objname); } } function ajaxpage(containerid,id){ var url="/mas.php?id="+id; var page_request=false; if(window.XMLHttpRequest){ page_request=new XMLHttpRequest(); } else if(window.ActiveXObject){ try{ page_request=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ page_request=new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){} } } else { return false; } page_request.onreadystatechange=function(){ loadpage(page_request,containerid) }; page_request.open('GET', url, true); page_request.send(null); }; function loadpage(page_request,containerid){ if(page_request.readyState==4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){ document.getElementById(containerid).innerHTML=page_request.responseText; } }; function masdiv(contid,id) { ajaxpage(contid,id); masabre(contid); }
Yo no escribí todo el javascript, como se puede ver, pero modifiqué varias cosas para hacerlas funcionar de la manera que necesitaba, menos ese detalle, que no logro entender.
¿Por qué se produce eso? ¿Lo puedo evitar?
Saludos!