Jump to content
rmlm

[Resolvido] slide div (motion)

Recommended Posts

rmlm

é o seguinte eu tenho 4 divs com conteudo encondidas na esquerda e um menu que controla o aparecimento de cada uma!

o meu problema é que eu quero que quando abra uma div a que tiver aberta feche (isto com efeito slide)!

Acho que nao me estou a explicar bem por isso vou mostrar um exemplo que ja fiz que funciona bem so com uma div.

<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 7</title>

<style type="text/css">
.c{
background-color:#FF0000;
color:#FFFFFF;
position:absolute;
top:180px;
left:-1100px;
width:1100px;
height:300px;
text-align:right;
}
</style>

<script type="text/javascript">
var itrv1,x=-1100,subir=false;

	function mover(ndiv){
		itrv1=setInterval("saltar('"+ndiv+"')",20); 
	}

	function saltar(ndiv){
		var div=document.getElementById(ndiv);
			if(subir){
				x-=50;
			if(x<=-1100){x=-1100;subir=false;clearInterval(itrv1);}
			}
			else{
				x+=50;
				if(x>=0){x=0;subir=true;clearInterval(itrv1);}
				}
		div.style.left=x;
	}
</script>

</head>

<body>
<a href="#" onclick="mover('conteudo1');">MOSTRA 1</a>
<a href="#" onclick="mover('conteudo2');">MOSTRA 2</a>
<a href="#" onclick="mover('conteudo3');">MOSTRA 3</a>
<a href="#" onclick="mover('conteudo4');">MOSTRA 4</a>


<div id="conteudo1" class="c"><h2>DIV 1</h2></div>
<div id="conteudo2" class="c"><h2>DIV 2</h2></div>
<div id="conteudo3" class="c"><h2>DIV 3</h2></div>
<div id="conteudo4" class="c"><h2>DIV 4</h2></div>
</body>

</html>

Já fiz uma função para cada div, ja uma funçao esconde e mostra em separado ja tentei de tudo... se alguem souber me puder ajudar...

Share this post


Link to post
Share on other sites
rmlm

eu estou aberto a tudo... só usei javascript pq estou mais a vontade...

Não me consegues arranjar um exemplo que faça aquilo que eu quero?

obrigado

Share this post


Link to post
Share on other sites
brunoais

Como? Podes indicar?

Já agora, marca o tópico cmo resolvido


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
rmlm

criei uma funçao para cada div e dpois meti uma "flag" que indicava se a div estava aberto ou nao! dpois e so verificar se a div2 ta aberta ou nao antes de abrir a div!

segue abaixo o javascript:

function mover(){
if(aberto2 == 1){mover2();}
if(aberto3 == 1){mover3();}
itrv1=setInterval('saltar()',10); 
}
                
function saltar(){
if(subir){
        x-=50;
        if(x<=-1100){x=-1100;subir=false;clearInterval(itrv1); aberto = 0;}
    }
    else{
        x+=50;
       	if(x>=0){x=0;subir=true; aberto = 1; clearInterval(itrv1); aberto = 1;}
    }
    conteudo.style.left=x;
}
////////////////////////////////////////////////////////////////////////////
function mover2(){
if(aberto == 1){mover();}
if(aberto3 == 1){mover3();}
itrv2=setInterval("saltar2()",10); 
}
                
function saltar2(){
if(subir2){
        x2-=50;
        if(x2<=-1100){x2=-1100;subir2=false;clearInterval(itrv2); aberto2 = 0;}
    }
    else{
        x2+=50;
       	if(x2>=0){x2=0;subir2=true; clearInterval(itrv2); aberto2 = 1;}
    }
    conteudo2.style.left=x2;
}

Se for preciso faço um exemplo a funcionar!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.