4

Gostaria de realizar uma simples animação que seja executada no evento de clique atribuído a um elemento. Este é o site que usarei essa animação.

Suponhamos que meu elemento seja um um circulo, por exemplo. Quero que, ao clicar, ele fique maior e mostre algumas informações. Porém depois da execução, deverá haver um botão "Fechar" para que o elemento volte à posição original (menor, menos informações).

Como poderia fazer isto?

2
  • Você está utilizando algum framework de JS ou você quer fazer isto com javascript puro ?
    – fbadaro
    Commented 24/02/2014 às 19:08
  • 1
    javascript puro, @fbadaro, tipow, eu tenho um "+" quando clicar aparece um background com info..
    – Furlan
    Commented 24/02/2014 às 19:09

3 Respostas 3

4

Você pode facilmente fazer isto utilizando o método .animate() do jQuery :

Exemplo:

HTML:

<div class=container>
<div class=circulo>Mais</div>
<div class=close>X</div>
</div>

Javascript(utilizando jQuery):

function mostraInfo(elemento){
 $(elemento).html("Carregando..."); //coloca o texto "Carregando..." no circulo enquanto realiza animação
  $(elemento).stop().animate({
    width: "200px", //propriedades a serem animadas (objetivo da animacao)
    height: "200px",
    padding: "10% 0 0 10%"
  }, {
    duration: 1000,
    specialEasing: {
        width: "linear",
        height: "linear"
    },
  complete: function() {
    $(elemento).html("informação informação informação informação informação informação informação informação informação informação "); //exemplo de informacoes
    $('.close').show(); //mostra o botao de fechar
  }
 });
}

function escondeInfo(elemento){
 $(elemento).html(""); //limpa o html do elemento (as informacoes)
  $(elemento).stop().animate({
    width: "30px", //valores iniciais
    height: "30px",
    padding: "30px"
  }, {
    duration: 1000,
    specialEasing: {
        width: "linear",
        height: "linear"
    },
  complete: function() {
    $(elemento).html("Mais"); //volta ao texto anterior "Mais"
    $('.close').hide(); //esconde o botao de fechar
  }
 });
}

$('.circulo').click(function(){
  mostraInfo(this);//executa funcao que anima aumentando o circulo e mostra informacoes
});

$('.close').click(function(){
  escondeInfo($('.circulo')); //executa funcao que anima diminuindo o circulo e esconde informacoes
});

Exemplo funcionando no JSFiddle

6
  • poxa, muito bom , isso mesmo, tem como fazer um voltar, tipo um "x"
    – Furlan
    Commented 24/02/2014 às 19:37
  • Tem sim, vou fazer e atualizar a resposta @Furlan Commented 24/02/2014 às 19:53
  • ta...vo esperar aki
    – Furlan
    Commented 24/02/2014 às 19:54
  • pra faltar so falta o botao fechar;
    – Furlan
    Commented 24/02/2014 às 20:08
  • Pronto @Furlan, mudei toda a implementação, separei em funções pra ficar melhor pra você entender, e coloquei o seu botão ali como um quadrado vermelho(voce pode alterar se quiser) Commented 24/02/2014 às 20:54
2

Recomendo utilizar jQuery, facilita o entendimento e você escreve menos e faz mais. Fiz um código rápido e simples com base no que me passou:

HTML

<div class='conteudo-oculto'> 
    <div>Conteudo da sua mensagem</div>
    <span style='display:none'>Mensagem oculta</span>
</div>

CSS

.conteudo-oculto span { display none; }
.blue { background-color: blue !important }
.conteudo-oculto { display: block; width: 200px; height:200px; background-color: red; padding:15px; border-radius:200px; line-height:200px; text-align:center; cursor:pointer }

JavaScript

$( function (){
    $(".conteudo-oculto").click( function(){
        $(".conteudo-oculto div, .conteudo-oculto span").toggle();
        
        if( !$(".conteudo-oculto").hasClass('blue') )
        $(".conteudo-oculto").addClass('blue');
        
        else
         $(".conteudo-oculto").removeClass('blue');
        
    });
});

JSFiddle


Versão 2

Veja se é isto (o HTML é o mesmo):

CSS

.conteudo-oculto span { display none; }
.blue { background-color: blue !important }
.conteudo-oculto { display: block; width: 100px; padding-top:15px; height:100px; background-color: red; padding:15px; border-radius:100px; text-align:center; cursor:pointer }

JavaScript

$( function (){
    $(".conteudo-oculto").click( function(){
        $(".conteudo-oculto div, .conteudo-oculto span").toggle();
        
        if( !$(".conteudo-oculto").hasClass('blue') ){
            $(".conteudo-oculto").animate({
                height:'200px',
                width:'200px',
                'border-radius': '200px'
                
            },1000);
            $(".conteudo-oculto").addClass('blue');
        }
        else {
            $(".conteudo-oculto").animate({
                height:'100px',
                width:'100px',
                'border-radius': '100px'
                
            },1000);            
         $(".conteudo-oculto").removeClass('blue');
        }
    });
});

JSFiddle

1
  • cara, eh isso mesmo, obrigado, como posso aumentar o tamanho do circulo oculto
    – Furlan
    Commented 24/02/2014 às 19:25
0

Sem usar javascript (jsbin):

<div class="circulo" tabindex="0">
  <div class="circulo--informacoes">Umas informações</div>
</div>
.circulo, .circulo--informacoes {transition: all 1s;}
.circulo {
  /* mude a vontade */
  background-color: yellow;
  height: 16px; width: 16px;
  border-radius: 100%;
  overflow: hidden;
}
.circulo--informacoes {opacity: 0;}
.circulo:focus {width: 64px; height: 64px; padding: 64px;}
.circulo:focus .circulo--informacoes {opacity: 1;}
8
  • como faço para ela abrir pra lado esquerdo, inves de ir pro liner, ou seja, ir para lado direito, mas quero que abra para o lado esquerdo
    – Furlan
    Commented 25/02/2014 às 13:38
  • jsbin.com/riyazati/2/edit Commented 25/02/2014 às 13:41
  • eu pensei em tipo, dentro do circulo ter um "+", ai quando clicar nele vai aparecer a msg normal, so que esse + rolar, virando um "X", e quando clicar nesse "X" voltar ao normal...sera q da?
    – Furlan
    Commented 25/02/2014 às 13:54
  • Dá, mas você parecendo meu cliente. Por que não olha o código e tenta entender a ideia? Dica: use transform: rotate(45deg). Commented 25/02/2014 às 13:57
  • ok, vou tentar, vlw gustavo rodrigues
    – Furlan
    Commented 25/02/2014 às 13:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .