Jump to content

[Resolvido] slide div (motion)


rmlm
 Share

Recommended Posts

é 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...

Link to comment
Share on other sites

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%.

Link to comment
Share on other sites

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!

Link to comment
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
 Share

×
×
  • 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.