[Resolvido] Jquery animate()

[Leandro D. 0]

Salve galera! Comecei a pouco tempo usar o Jquery em meus projetos. Eu tenho uma div com id “detalhes” position: fixed e bottom: -190px, assim ela fica fora da área visível do navegador. Então eu uso o Jquery para fazer com que ao clicar em outra div com id “mostra” a div “detalhes” suba como se fosse um pop-up, para isso eu uso o animate(). Dentro da div “detalhes” tem outra div com id “fechadet” que quando clico faz a div “detalhes” descer para a posição inicial, veja o código.

 

<script type="text/javascript">
$(document).ready(function() {
       		$("#mostra").click(function(){
           		$("#detalhes").animate({"top": "-=190px"}, "slow");
   	});
       	$("#fechadet").click(function(){
          	$("#detalhes").animate({"top": "+=190px"}, "slow");
       });
   });
</script>

 

O código acima funciona legalzinho, mas eu queria saber como posso adicionar o efeito de fade in ao subir a div e fade out ao descer a div. Tudo ao mesmo tempo, quando a div subir ela vai dando o fade in e quando descer ela vai dando o fade out. O animate() tem a opção opacity, mas não consegui encaixar ela para este fim. Será que alguém pode me dar uma ajudinha. Desde já obrigado!

[Leandro D. 0]

Aí galera, eu encontrei a solução, segue abaixo o código para quem precisar algum dia. O segredo é aquele queue: false, assim não há a espera de uma animação acabar para a outra começar, ou seja, as duas são executadas juntas.

 

<script type="text/javascript">
$(document).ready(function() {
       $("#mostra").click(function(){
           $("#detalhes").css('opacity', 0);
    $("#detalhes").show();
    $("#detalhes").animate({opacity: 1}, {queue: false, duration: 'slow'});
    $("#detalhes").animate({ top: "-=190px" }, 'slow');
   	});
       $("#fechadet").click(function(){
      	    $("#detalhes").animate({opacity: 0}, {queue: false, duration: 'slow'});
    $("#detalhes").animate({ top: "+=190px" }, 'slow');
       });
   });
</script>

 

Código testado e funcionando.