Skip to main content
Título descritivo. Incorporação de código de site externo. Formatação de texto.
Fonte Link

Animate CSS e JSinvertido de um botão "fechar"

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 = '';  
});

JSFiddle

Animate CSS e JS

Bom dia, preciso de uma ajuda em Js e css, estou desenvolvendo um animate, que ao clicar no btn, o elemento faz o bounceOutLeft e Right, e assim mostra o conteudo escondido, enfim, esta funcionando a animação, porem, eu precisava de um botao "fechar", quando clicar no fechar, o btn volta ao seu lugar, ou seja, faz o efeito ao contrario, se fez bounceOutLeft, ele vai fazer o BounceOutRight, JSFIDDLE: http://jsfiddle.net/furlann/4VhTc/ alguem?

Animate invertido de um botão "fechar"

Estou desenvolvendo um animate com JS e CSS, que ao clicar no botão, o elemento faz o bounceOutLeft e Right, e assim mostra o conteúdo escondido. Está funcionando a animação, porém, como fazer um botão "fechar", e quando clicar nele, o botão volta ao seu lugar, ou seja, faz o efeito ao contrário? Se fez bounceOutLeft, ele vai fazer o 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 = '';  
});

JSFiddle

Removida a tag "PHP", que nada tem a ver com a pergunta.
Link
Fonte Link
Furlan
  • 2,4mil
  • 8
  • 29
  • 53

Animate CSS e JS

Bom dia, preciso de uma ajuda em Js e css, estou desenvolvendo um animate, que ao clicar no btn, o elemento faz o bounceOutLeft e Right, e assim mostra o conteudo escondido, enfim, esta funcionando a animação, porem, eu precisava de um botao "fechar", quando clicar no fechar, o btn volta ao seu lugar, ou seja, faz o efeito ao contrario, se fez bounceOutLeft, ele vai fazer o BounceOutRight, JSFIDDLE: http://jsfiddle.net/furlann/4VhTc/ alguem?