Hacer visible un div de forma animada?

chefnelone · #1 (**permalink**) 11/07/2007, 02:34

Hola a todos

tengo una funcion para hacer visible un div:

function visible() {
document.getElementById("p1").style.visibility="vi sible";
}

<div id="p1">
contenido
</div>

Esto funciona bien. Pero el div aparece de golpe (es decir de forma instantanea)
MI pregunta es: se puede hacer que aparezca de forma animada, o sea como un desplazamiento , como si fuera un movimiento.??

Estoy seguro que vi esto en alguna pagina y no era flash. Asi que debe ser js.

gracias
.

caricatos · #2 (**permalink**) 11/07/2007, 03:03

Hola:

La técnica es tener una capa con position relative y overflow: hidden; y otra con absolute de las mismas proporciones y empezar con un valor top (o left) de forma que quede fuera de la capa (>= a la altura o <= que la misma con valores negativos) y con setTimeout modificar el estilo para que se acerque (llegue) a cero.

Saludos

chefnelone · #3 (**permalink**) 11/07/2007, 04:23

emmm...
gracias caricatos.

Pero no se como arrancar con esto. No me pasas algun ejemplo.
No digo el codigo completo pero algo con que empezar. solo para darme una idea general de como hacerlo.
Sino, el nombre de esta tecnica para buscarlo con google

chefnelone · #4 (**permalink**) 11/07/2007, 04:48

encontre esto que esta bastante bien.
http://www.dynamicdrive.com/dynamici...edcollapse.htm
por si alguien lo necesita

chefnelone · #5 (**permalink**) 11/07/2007, 06:44

ALGUN ENTENDIDO por ahi...podria alguien probar este codigo

es para desocultar div de forma animada.

Funciona muy bien... pero cuando se carga la pagina por un segundo muestra los div que estan ocultos. Y eso no queda muy bien

En el ejemplo de este codigo no sucede. Quizas porque hay poco contenido en los div.
Pero en mi caso tengo muchas mas cosas dentro de los divs ocultos.

CODIGO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
//Animated Collapsible DIV- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last updated June 27th, 07'. Added ability for a DIV to be initially expanded.

var uniquepageid=window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, "") //get current page path and name, used to uniquely identify this page for persistence feature

function animatedcollapse(divId, animatetime, persistexpand, initstate){
this.divId=divId
this.divObj=document.getElementById(divId)
this.divObj.style.overflow="hidden"
this.timelength=animatetime
this.initstate=(typeof initstate!="undefined" && initstate=="block")? "block" : "contract"
this.isExpanded=animatedcollapse.getCookie(uniquep ageid+"-"+divId) //"yes" or "no", based on cookie value
this.contentheight=parseInt(this.divObj.style.heig ht)
var thisobj=this
if (isNaN(this.contentheight)){ //if no CSS "height" attribute explicitly defined, get DIV's height on window.load
animatedcollapse.dotask(window, function(){thisobj._getheight(persistexpand)}, "load")
if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
this.divObj.style.visibility="hidden" //hide content (versus collapse) until we can get its height
}
else if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
this.divObj.style.height=0 //just collapse content if CSS "height" attribute available
if (persistexpand)
animatedcollapse.dotask(window, function(){animatedcollapse.setCookie(uniquepageid +"-"+thisobj.divId, thisobj.isExpanded)}, "unload")
}

animatedcollapse.prototype._getheight=function(per sistexpand){
this.contentheight=this.divObj.offsetHeight
if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes"){ //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
this.divObj.style.height=0 //collapse content
this.divObj.style.visibility="visible"
}
else //else if persistence is enabled AND this content should be expanded, define its CSS height value so slideup() has something to work with
this.divObj.style.height=this.contentheight+"px"
}

animatedcollapse.prototype._slideengine=function(d irection){
var elapsed=new Date().getTime()-this.startTime //get time animation has run
var thisobj=this
if (elapsed<this.timelength){ //if time run is less than specified length
var distancepercent=(direction=="down")? animatedcollapse.curveincrement(elapsed/this.timelength) : 1-animatedcollapse.curveincrement(elapsed/this.timelength)
this.divObj.style.height=distancepercent * this.contentheight +"px"
this.runtimer=setTimeout(function(){thisobj._slide engine(direction)}, 10)
}
else{ //if animation finished
this.divObj.style.height=(direction=="down")? this.contentheight+"px" : 0
this.isExpanded=(direction=="down")? "yes" : "no" //remember whether content is expanded or not
this.runtimer=null
}
}

animatedcollapse.prototype.slidedown=function(){
if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
alert("Please wait until document has fully loaded then click again")
else if (parseInt(this.divObj.style.height)==0){ //if content is collapsed
this.startTime=new Date().getTime() //Set animation start time
this._slideengine("down")
}
}
}

animatedcollapse.prototype.slideup=function(){
if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
alert("Please wait until document has fully loaded then click again")
else if (parseInt(this.divObj.style.height)==this.contenth eight){ //if content is expanded
this.startTime=new Date().getTime()
this._slideengine("up")
}
}
}

animatedcollapse.prototype.slideit=function(){
if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
alert("Please wait until document has fully loaded then click again")
else if (parseInt(this.divObj.style.height)==0)
this.slidedown()
else if (parseInt(this.divObj.style.height)==this.contenth eight)
this.slideup()
}

// -------------------------------------------------------------------
// A few utility functions below:
// -------------------------------------------------------------------

animatedcollapse.curveincrement=function(percent){
return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
}

animatedcollapse.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

animatedcollapse.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

animatedcollapse.setCookie=function(name, value, days){
if (typeof days!="undefined"){ //if set persistent cookie
var expireDate = new Date()
var expstring=expireDate.setDate(expireDate.getDate()+ days)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()
}
else //else if this is a session only cookie
document.cookie = name+"="+value
}
</script>

</head>

<body>
<p><b>Example 1:</b></p>

<a href="javascript:collapse1.slidedown()">Slide Down</a> || <a href="javascript:collapse1.slideup()">Slide Up</a>
<div id="dog" style="width: 300px; height: 110px; background-color: #99E0FB;">


<h3>Content inside DIV!</h3>
<h4>Note: CSS height attribute defined</h4>

</div>

<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse1=new animatedcollapse("dog", 1000, false)

</script>

<p><b>Example 2:</b></p>

<a href="javascript:collapse2.slideit()">Show/ Hide DIV</a>
<div id="cat" >


<div style="padding: 0 5px">

<img src="images/back_animation.png" />

</div>

</div>

<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse2=new animatedcollapse("cat", 800, true)

</script>

</body>
</html>

gracias>

caricatos · #6 (**permalink**) 11/07/2007, 10:51

Hola:

La verdad es que el código que pensaba era algo más sencillo:

Código:

<html>
<head>
<title>
	efecto
</title>
<script type="text/javascript">
function tag(id) {
 return document.getElementById(id);
}
function ocultar(que) {
 tope = parseInt(tag(que).style.top);
 papi = parseInt(tag(que).parentNode.style.height);
 tag(que).style.top = ++tope + "px";
 if (tope == papi) {
   tag("ocultar").disabled = true;
   tag("mostrar").disabled = false;
 }
 else
  setTimeout("ocultar('" + que + "')", 10);
}
function mostrar(que) {
 tope = parseInt(tag(que).style.top);
 papi = parseInt(tag(que).parentNode.style.height);
 tag(que).style.top = --tope + "px";
 if (tope == 0) {
   tag("ocultar").disabled = false;
   tag("mostrar").disabled = true;
 }
 else
  setTimeout("mostrar('" + que + "')", 10);
}
</script>
</head>
<body >
<div id="contenedor" style="position: relative; height: 120px; width: 120px; overflow: hidden">
<div id="azul" style="width: 120px; height: 120px; background-color: blue; position: absolute; top: 0; left: 0; ">Esta capa se mostrará y se ocultará...</div>
</div>
<button id="ocultar" onclick="ocultar('azul')" >ocultar</button>
<button id="mostrar" onclick="mostrar('azul')" disabled >mostrar</button>
</body>
</html>

Saludos

chefnelone · #7 (**permalink**) 11/07/2007, 13:04

la verdad es que esta bien.
siempre que puedo elijo lo mas sencillo
lo voy a probar

chefnelone · #8 (**permalink**) 12/07/2007, 07:37

Caricatos si andas por ahi.

estoy probando el codigo que me pasaste.

funciona bien pero en firefox (en mac) se ve mal. En en todos los otros se ve bien.
A ver si me podes decir como solucionarlo

imagen cuando div no esta oculto:
Como veras, tengo un select dentro del div:

http://img402.imageshack.us/img402/9...cture21sk3.png

pero... cuando le doy a "ocultar" el div se oculta pero se puede ver la barra de desplazamiento del select.

Es como si la esa barra no se ocultara con este codigo. Hay otra forma de ocultar ???
Como es medio extrano, te dejo una captura para que me entiendas.

http://img403.imageshack.us/img403/823/picture23vf5.png

richardinj · #9 (**permalink**) 12/07/2007, 08:24

Investiga sobre JQUERY

Saludos.

chefnelone · #10 (**permalink**) 12/07/2007, 11:15

jquery ?
es js o ajax ?

me darias algun dato mas

gracias