Bom dia, preciso de uma ajuda em Js e css, estouEstou desenvolvendo um animateanimate com JS e CSS, que ao clicar no btnbotão, o elemento faz o bounceOutLeftbounceOutLeft
e RightRight
, e assim mostra o conteudoconteúdo escondido, enfim, esta. Está funcionando a animação, poremporém, eu precisava decomo fazer um botaobotão "fechar", e quando clicar no fecharnele, o btnbotão volta ao seu lugar, ou seja, faz o efeito ao contrario, secontrário? Se fez bounceOutLeftbounceOutLeft
, ele vai fazer o BounceOutRight,
JSFIDDLE:
http://jsfiddle.net/furlann/4VhTc/
alguem?BounceOutRight
.
HTML
<div class="container animated">
<div class="star">★</div>
<span>GIRLS</span>
</div>
<div class="container2 animated">
<div class="star">★</div>
<span>BOYS</span>
</div>
<div id="conteudo">
<span> conteudo </span>
</div>
<div id="conteudo2">
<span> conteudo2 </span>
</div>
CSS
.container {
font-size: 40px;
background: #C9C9C9;
padding: 20px;
width: 100px;
text-align: center;
border-radius: 6px;
margin: 0 auto;
cursor: pointer;
line-height: 20px;
}
.container2 {
font-size: 40px;
background: #C9C9C9;
padding: 20px;
width: 100px;
text-align: center;
border-radius: 6px;
margin: 0 auto;
cursor: pointer;
line-height: 20px;
}
.container span {
display: block;
margin: 12px 0 0 0;
font-size: 16px;
font-weight: bold;
}
.container2 span {
display: block;
margin: 12px 0 0 0;
font-size: 16px;
font-weight: bold;
}
JS
var el = document.querySelector(".container");
var el2 = document.querySelector(".container2");
var controller = Animate(el);
var controller2 = Animate(el2);
var link = document.getElementById('conteudo');
link.style.display = 'none';
var link2 = document.getElementById('conteudo2');
link2.style.display = 'none';
el.addEventListener("click", function() {
// mixture
controller
.add("bounceOutRight");
link.style.display = '';
});
el2.addEventListener("click", function() {
// mixture
controller2
.add("bounceOutLeft");
link2.style.display = '';
});