I would like to make 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 click bigger and show some information. But after the execution, there should be a "Close" button for the element to return to the original position (smaller, less information).
How could I do this?
You can easily do this using the jQuery% method :
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
});
I recommend using jQuery, it facilitates understanding and you write less and do more. I made a quick and simple code based on what happened to 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');
});
});
See if this is (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');
}
});
});
Without using 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;}