Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bruno Augusto

[Resolvido] Executar duas "animações" simultaneamente...

Por , em Javascript

Recommended Posts

Bruno Augusto    417

Bruno Augusto
Postado

Bom, desisto. Sou péssimo designer, logo CSS e JavaScript são minhas únicas alternativas para um layout bonito (ou menos feio :P)

 

Bom, como meu FTP tá de onda comigo hoje, postarei o soure da página, que é bem pequeno pois estou montando o layout aos pedaços, começando pelo menu:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="en-US">

<head>

   <title>Layout :: Menu</title>

   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery.ui.js"></script>

   <script type="text/javascript">

   $( document ).ready( function() {

   	$( '#menu ul li' ).click( function() {

   		if( $( '#panel' ).css( 'marginRight' ) == '-200px' ) {

                   $( '#panel' ).animate({ 'marginRight' : '0'}, 1000 );

   		} else {

                   $( '#panel' ).animate( { 'marginRight': '-200px' }, 1000 );
   		}

   	});
   });

   </script>

   <style type="text/css">

   @import url( 'reset.css' );

   body {
       background-color:       #2b2b2b;
       margin:                 5%;
   }

   #sidebar {
       padding:                10px;
       overflow:               hidden;
   }

   #menu {
       border-right:           5px solid #800004;
       float:                  right;
   }

   #menu ul li {
       background-image:       url( 'inactive.png' );

       cursor:                 pointer;
       display:                block;
       height:                 156px;
       position:               relative;
       width:                  40px;
       z-index:                100;
   }

   * html #menu ul li {
       position:               fixed;
   }

   #menu ul li.active {
       background-image:       url( 'red.png' );
       z-index:                101;
   }

   #menu ul li.inactive {
       margin-top:             -8px;
   }

   #panel {
       background-color: #2b2b2b;

       -webkit-border-radius:  0 10px 10px 0;      /* Safari and Chrome */
       -moz-border-radius:     0 10px 10px 0;      /* Firefox */
       -khtml-border-radius:   0 10px 10px 0;      /* Linux browsers */
       border-radius:          0 10px 10px 0;      /* CSS3 */

       -webkit-box-shadow:     6px 6px 7px rgba(  0,  0,  0, 0.2 );
       -moz-box-shadow:        6px 6px 7px rgba(  0,  0,  0, 0.2 );
       -pie-box-shadow:        6px 6px 7px  rgb( 33, 33, 33      ); /* Hack for the Hack - Parsing RGBA used above */
       box-shadow:             6px 6px 7px rgba(  0,  0,  0, 0.2 );

       behavior:               url( 'PIE.htc' );   /* Internet Explorer - hack */

       float:                  right;
       height:                 auto;
       margin-right:           -200px;
       min-height:             452px;
       width:                  180px;
   }

   </style>
</head>

<body>

   <div id="sidebar">

       <div id="panel">

       </div>

       <div id="menu">

           <ul>
               <li class="active" id="search">
                   <a href="#"></a>
               </li>

               <li class="inactive" id="components">
                   <a href="#"></a>
               </li>
           </ul>

       </div>

   </div>

</body>

</html>

 

Existem duas imagens (as abas) que, se for necessário posto depois. Diga-se de passagem, acho que até os 12 trabalhos de Hércules foram mais fáceis do que encaixar aquele triângulo na aba. :angry:

 

Enfim.

 

O super-mega-efeito nada mais é do que ao puxar uma das abas, o menu venha junto. E ao clicar de novo, ele saia de cena.

 

O meu problema é na borda vermelha presente na DIV #menu. Ela está lá para que, quando o menu estiver fechado, as abas não fiquem à deriva na tela.

 

Eu gostaria que assim que o menu tiver sido aberto, aquela linha vermelha, se estenda através de borda lateral esquerda desse menu.

 

Põe a borda em #panel, à esquerda, ué?

 

O problema é que se colocar em #panel ela vai se estender por toda altura corretamente, mas isso só deve acontecer depois que o menu estiver aberto, ou seja, enquanto fechado, deve limitar-se apenas à abas, de #menu.

 

Mas eu não consigo executar duas "animações" ao mesmo tempo, para dar suavidade ao efeito.

 

Se eu adicionar a borda em #panel e disparar a animação de abertura e logo abaixo disparar outra para que oculte a borda de #menu, por um micro segundo fica perceptível a remoção da borda para que a de #panel se encaixe.

 

Queria algo mais suave, como se (nos bastidores) a borda de #panel viesse, "encontrasse" a de #menu e à ela se fundisse, ficando tal qual se eu simplesmente adicionasse a borda diretamente em #menu, o que não pode acontecer pelos mesmos motivos de adicionar a borda à esquerda de #panel.

 

E, obviamente, deveria haver a mesma transição suave quando ocultando, isto é, a "borda fundida" seria desacoplada da de #menu, voltando a pertencer apenas à #panel apenas e sumiria ao ter sua margem empurrada de volta, de forma a ficar escondida.

 

Que é possível, eu acredito que seja. Mas faria eu isso com a jQuery ou precisaria apenas adaptar meu HTML / CSS?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Eu gostaria que assim que o menu tiver sido aberto, aquela linha vermelha, se estenda através de borda lateral esquerda desse menu.

posta uma imagem do efeito final (correto), e as imagens.. pq aqui rodando oque você postou, ficou dificil de imaginar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Augusto    417

Bruno Augusto
Postado

Beleza

 

Menu Fechado

fechado.png

 

Menu Aberto

aberto.png

 

Aba Ativa

redes.png

 

Aba Inativa

inactivee.png

 

Claro que o que me interessa é o efeito, depois de funcionando volto pra Avaliações e vejo o que pode melhorar na medida que minha capacidade no Photoshop permitir.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

hehe :lol:

 

achei 'engraçado' o efeito:

$( document ).ready(function(){
$( '#menu ul li' ).click(function(){
	if( $( '#panel' ).css( 'marginRight' ) == '-200px' ) 
	{
		$( '#panel' ).animate({ 'marginRight' : '0'}, 1000 );
		$( '#menu' ).animate({ height: '453px'}, 1000 );
	} 
	else 
	{
		$( '#panel' ).animate( { 'marginRight': '-200px' }, 1000 );
		$( '#menu' ).animate({ height: '336px'}, 1000 );
	}
});
});

e no css:

#menu {
border-right:           5px solid #800004;
float:                  right;
height: 				336px;
}

 

^_^

 

e cara, basicamente qq 'efeito visual', que você queira, a grande 'chave' é o css, o jQuery (javascript), não faz nada mais do que manipular o css.

Ou seja, se você não consegue resolver com css, não adianta procurar 'mágica' com js

 

ps: não curti tua indentação com espaços

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Augusto    417

Bruno Augusto
Postado

Gostei do efeito, funcionou perfeitamente. :D

 

Mas fiquei intrigado com seu comentário sobre o "engraçado". Minha intenção não era essa mas, será que ficou mesmo engraçado a ponto de transpassar os limites que separam o profissional do elegante?

 

Por que não é essa minha intenção. Quero algo chamativo, obviamente, mas sóbrio.

 

Sobre os espaços de indentação, nem eu curti isso. Não sei porque coloquei, nunca fiz antes :P

 

E quanto ao CSS ser a chave, sei bem disso e admito que já estava apelando para o JavaScript como forma de gambiarra,mesmo sendo a coisa que mais detesto no meio Web (e só no meio Web :lol: ).

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Mas fiquei intrigado com seu comentário sobre o "engraçado". Minha intenção não era essa mas, será que ficou mesmo engraçado a ponto de transpassar os limites que separam o profissional do elegante?

não não... esquece isso ^_^

totalmente em Off oque eu comentei.. assim.. curti as tuas abas.

 

Um dia ainda tento fazer um layout tb

Sucesso ai.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito