Show/Hide animated information by clicking on the widget

Asked

Viewed 4,074 times

4

I would like to perform a simple animation that is executed in the click event assigned to an element. This is the site that I will use this animation.

Suppose my element is a circle, for example. I want it to get bigger by clicking and show some information. However after execution, there should be a "Close" button for the element to return to its original position (smaller, less information).

How could I do this?

  • Are you using some JS framework or do you want to do it with pure javascript ?

  • 1

    pure javascript, @fbadaro, tipow, I have a "+" when clicking appears a background with info..

3 answers

4


You can easily do this using the method .animate() jQuery :

Example:

HTML:

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

Javascript (using 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
});

Example running on Jsfiddle

  • Poxa, very good , that’s right, has how to make a back, like a "x"

  • Yes, I will do and update the reply @Furlan

  • ta...vo wait Aki

  • missing only the boot close;

  • Ready @Furlan, I changed the whole implementation, separated into functions to be better for you to understand, and put your button there as a red square(You can change if you want)

  • Thank you very much, that I needed!

Show 1 more comment

2

I recommend using jQuery, it makes understanding easier and you write less and do more. I made a quick and simple code based on what you gave me:

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


Version 2

See if this is it (the HTML is the same):

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

  • Man, that’s right, thank you, how can I increase the size of the hidden circle

0

Javascript free (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;}
  • how do I make it open to the left side, instead of going to the left side, I mean, go to the right side, but I want you to open to the left side

  • http://jsbin.com/riyazati/2/edit

  • I thought like, inside the circle have a "+", then when you click it will appear the normal msg, only this + roll, turning an "X", and when you click this "X" back to normal...sera q da?

  • Gives, but you look like my client. Why not look at the code and try to understand the idea? Tip: use transform: rotate(45deg).

  • Okay, I’ll try, vlw

  • like, how do I make +, turn into x, Transition?

  • @Gustavoribeiro, I took an example on the net, http://codepen.io/anon/pen/nxKpz I just need it to stop when I turn....

  • Take one of these example and change the position of the three bars to form a +.

Show 3 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.