[Resolvido] animate

allex_carvalho · Dezembro 26, 2011

Bom dia pessoal.

Tenho um menu que está dentro de uma div com id primeira. Ao clicar em algum item do menu a div primeira tem que subir uns 300px. E preciso fazer com que ela só suba quando clique uma vez. Vejam como está a estrutura:

<head>
<script type="text/javascript">
   $('.clique').click(function() {
       $('#primeira').animate({
       top: '-=250'
       }, 5000, function() {
       // Animation complete.
       });
   });
</script>
</head>
<div id="primeira">
           <img src="@img/logoIndex.png" width="1133" height="44" alt="Valeria Oliveira" class="primeiraLogo"/>
           <p id="textoIndex">
               <img src="@img/textoIndex.png" width="562" height="15" alt="ESCRITÓRIO ARTE DESIGNER DE INTERIORES ARQUITETOS ASSOCIADOS" />
           </p>
           <ul id="menu">
               <li class="contatos"><a class="clique" href="?p=contato" title="contatos"></a></li>
               <li class="artes"><a class="clique" href="?p=artes" title="artes"></a></li>
               <li class="publicacoes"><a class="clique" href="?p=publicacoes" title="publicações"></a></li>
               <li class="projeto"><a class="clique" href="?p=projeto" title="projeto"></a>
                   <ul class="subMenu">
                       <li><a class="clique" href="" title="INTERIORES">INTERIORES</a></li>
                       <li><a class="clique" href="" title="ARQUITETURA">ARQUITETURA</a></li>
                       <li><a class="clique" href="" title="DESIGNER">DESIGNER</a></li>
                       <li><a class="clique" href="" title="COMERCIAL">COMERCIAL</a></li>
                   </ul>
               </li>
               <li class="news"><a class="clique" href="?p=news" title="news"></a></li>
               <li class="perfil"><a class="clique" href="?p=perfil" title="perfil"></a></li>
           </ul>
       </div><!--primeira-->

A div não está subindo ao clicar.

allex_carvalho · Dezembro 26, 2011

Bem pessoal... Inicialmente resolvi isso assim:

<script type="text/javascript">
   $("#primeira").click(function(){
       $("#primeira").animate({"top": "-=220px"}, "slow");
   });
</script>

Ao clicar na div ela sobe... Porém... Duas coisas...

1ª - Não estou conseguindo fazer clicar em algum item do menu (.clique) e ela (#primeira) subir;

2ª - Ao clicar uma vez e a div subir, parar o efeito de clicar e a div subir.

Obrigado pela atenção...

allex_carvalho · Dezembro 26, 2011

A função animate só funciona se a função estiver diretamente na div que se deseja o efeito? Tipo, eu teria que linkar tudo na div id primeira? Porque não está funcionando com a class vinda de outro lugar (mesmo estando dentro da div primeira)

Obrigado.

Consegui fazer o menu fazer com que a div subisse, usei a li. Vejam:

       <script type="text/javascript">
           $('li').click(function(){
             $("#primeira").animate({"top": "-=220px"}, "slow");
           });
       </script>

Alguém poderia dar uma luz de como fazer para que essa função só seja executada no primeiro clique em alguma li? Senão, no segundo clique o topo do site some.

Obrigado.

William Bruno · Dezembro 26, 2011

A função animate só funciona se a função estiver diretamente na div que se deseja o efeito?

? não fez sentido essa pergunta.

Tipo, eu teria que linkar tudo na div id primeira?

não. Mas tb não sei se entendi completamente oque você quis dizer.

Porque não está funcionando com a class vinda de outro lugar (mesmo estando dentro da div primeira)

então o erro é outra coisa. você pode sim usar uma class para disparar um animate() de outro elemento.

Uma coisa não tem nada a ver com outra. O disparador pode ser qualquer um.

Note que o teu css também interfere, logo não temos como testar o trecho que você postou, sem saber como está o teu css.

Sempre que quiser ajuda, poste o mínimo necessário para que rodemos o script.

-- editado --

Alguém poderia dar uma luz de como fazer para que essa função só seja executada no primeiro clique em alguma li?

antes de executar, verifique se já não foi executado.

por exemplo, pegando o valor atual do .top do elemento. Se já tiver tal valor não executa, se não tiver, deixa executar.

Ou usando uma variavel de escopo global como flag para executado ou não executado.

allex_carvalho · Dezembro 26, 2011

antes de executar, verifique se já não foi executado.

por exemplo, pegando o valor atual do .top do elemento. Se já tiver tal valor não executa, se não tiver, deixa executar.

Ou usando uma variavel de escopo global como flag para executado ou não executado.

E como eu pegaria o valor da margin? Isso funcionaria com javascript também?

Obrigado.

William Bruno · Dezembro 26, 2011

E como eu pegaria o valor da margin?

pq margin ? você está trabalhando com top, e não com margin.

js puro:

alert( obj.style.top );

vai te retornar o valor da propriedade css top, do elemento. Desde que ela esteja declarada inline [ style="" ]

para pegar o valor "computado", você tem que usar um getComputedStyle() [ e algum hack para deixar cross browser ]

Isso funcionaria com javascript também?

como assim ?

oque você entende por javascript ? e por jQuery ?

Acho que o problema é que você não tem conhecimentos básicos dessa linguagem.

allex_carvalho · Dezembro 26, 2011

Acho que o problema é que você não tem conhecimentos básicos dessa linguagem.

Sim... Realmente é ai o problema :(

Até onde entendi, isso teria que dar um alert com a posição do top:

       <script type="text/javascript">
           alert( obj.style.top );
       </script>

Não faz.

Depois que clico no menu uma vez o codigo fonte (pelo firebug) fica assim:

Obrigado.

Tentei definir a variavel e fazer uma condição com if, porém, parou de funcionar a função.

Veja como ficou o codigo:

<div id="primeira" style="top:0;">
           <img src="@img/logoIndex.png" width="1133" height="44" alt="Valeria Oliveira" class="primeiraLogo"/>
           <p id="textoIndex">
               <img src="@img/textoIndex.png" width="562" height="15" alt="ESCRITÓRIO ARTE DESIGNER DE INTERIORES ARQUITETOS ASSOCIADOS" />
           </p>
           <ul id="menu">
               <li class="contatos"><a href="?p=contato" title="contatos"></a></li>
               <li class="artes"><a href="?p=artes" title="artes"></a></li>
               <li class="publicacoes"><a href="?p=publicacoes" title="publicações"></a></li>
               <li class="projeto"><a href="?p=projeto" title="projeto"></a>
                   <ul class="subMenu">
                       <li class="interiores"><a href="" title="INTERIORES"></a></li>
                       <li class="arquitetura"><a href="" title="ARQUITETURA"></a></li>
                       <li class="designer"><a href="" title="DESIGNER"></a></li>
                       <li class="comercial"><a href="" title="COMERCIAL"></a></li>
                   </ul>
               </li>
               <li class="news"><a href="?p=news" title="news"></a></li>
               <li class="perfil"><a href="?p=perfil" title="perfil"></a></li>
           </ul>
       </div><!--primeira-->
       <script type="text/javascript">
           var top = obj.style.top;
           if(top == '0'){
               $('li').click(function(){
                     $("#primeira").animate({"top": "-=220px"}, "slow");
               });
           } else {}
       </script>

Obrigado pela atenção.

William Bruno · Dezembro 26, 2011

obj deve apontar para o elemento.

var obj = document.getElementById('primeira');
alert( obj.style.top );

entendeu ?

não existe mágica, o script só faz oq você mandar ele fazer.

allex_carvalho · Dezembro 27, 2011

obj deve apontar para o elemento.
var obj = document.getElementById('primeira');
alert( obj.style.top );
entendeu ?

não existe mágica, o script só faz oq você mandar ele fazer.

Sim... Estou començando a entender o funcionamento.

Passei a noite fazendo uns testes e vi que a condição if/else só executa uma vez (ao carregar o script). Tentei definir outra variavel para pegar o novo valor do top, porém, não sei se fiz da maneira correta (defini a variavel embaixo da função animate que faz o top diminuir), enfim, não consegui resgatar o novo valor.

Qual o procedimento a ser feito para conseguir resgatar esse novo valor do top?

Veja a forma que está:

<script type="text/javascript">
           var obj = document.getElementById('primeira');
           if(obj.style.top == '250px'){
               $('li').click(function(){
                     $("#primeira").animate({"top": "-=220px"}, "slow");
               });
           } else { 
               $('li').click(function(){
                     $("#primeira").animate({"top": "=0px"}, "slow");
               });
               $('li').click(function(){
                   $("#primeira").stop().animate({"top": "-=220px"}, "slow");
               });
       }
       </script>

Obs.: O stop é porque tenho um menu drop down, quando clico em algum item do submenu ele executa a função duas vezes.

Online

Mais uma vez... Obrigado pela atenção.

William Bruno · Dezembro 27, 2011

faça o if dentro do click.

assim cada vez que for clicado, o novo valor atual do top, será pedido.

allex_carvalho · Dezembro 27, 2011

Resolvido... Funcionando 100%, nem precisa do stop()

Caso alguém precise ver como ficou o codigo:

<script type="text/javascript">
           var obj = document.getElementById('primeira');
               $('li').click(function(){
                   if(obj.style.top == '250px'){
                     $("#primeira").animate({"top": "-=220px"}, "slow");
                   } else { 
                     $("#primeira").animate({"top": "=0px"}, "slow");
                   }
               });
       </script>

Obrigado mesmo William :)

Arquivado

[Resolvido] animate

Recommended Posts

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

Fóruns

Tempo Real

Informação importante