0

Quando eu clicasse no botão era pra ele ir pra esquerda por 400ms porém quando eu clico ele vai direto sem a animação, ele "pula" direto pro lugar final sem passar pelo resto.

CSS:

#icone-menu.icone-menu-animacao{
    left: -10px;
    position: relative;

}

JS com JQuery:

$("#btn-menu").on("click", function(){
        $('#icone-menu').toggleClass('icone-menu-animacao', 400);
    }); 

HTML:

<a href="#" id="btn-menu">
<img src="img/menu55.png" id="icone-menu">
</a>

Novo CSS:

#icone-menu{
    position: block;
     left:0;
     transition: 0.2s;   
}
#icone-menu.icone-menu-animacao{
    left: -10px;
    position: relative;
    transition: 0.2s;
}
1
  • se a resposta estiver certa, por favor marca-a como certa :)
    – MoshMage
    20/04/2015 às 17:05

2 Respostas 2

2

O seu CSS tem que ter transition e um "default state", está aqui um exemplo em jsFiddle.net;
Mais, o ,400 na linha $('#icone-menu').toggleClass('icone-menu-animacao', 400); não é necessário uma vez que o toggleClass só leva um argumento

7
  • mas me diga, como fazer pra ele voltar com a animação também? Poque ele esta voltando direto.. 20/04/2015 às 17:13
  • 1
    @AndreyHartung para voltar com animação também, você altera o css do "default state" para ter posição relativa e transition assim
    – MoshMage
    20/04/2015 às 17:15
  • 2 coisas, 1o pq eu não consigo te referenciar no inicio na mensagem? eu coloco @MoshMage e some ¬¬ 2o eu editei ali com o CSS que ta agora e eu tirei o 400 mas a animação de volta ainda n está acontecendo... 20/04/2015 às 17:26
  • @AndreyHartung quanto ao primeiro, eu não sei x) Quanto ao segundo, faz um jsfiddle e põe o link aqui para ver o que se passa :)
    – MoshMage
    20/04/2015 às 18:24
  • consegui fazer tudo que eu queria, eu reescrevi 96% do funcionamento das animações kkkkkkkkkkk 20/04/2015 às 18:35
1

As transições CSS acontecem devido a propriedade transition, sem ela as trocas de propriedades dos elementos irão acontecer de forma "brusca". Para fazer qualquer troca (desde que a transition afete estes) de elementos você pode usar essa propriedade. Ela controla o tempo de transição, o tipo de transição e diversas outras coisas.

Dessa forma, para fazer um elemento ter uma animação, você simplesmente pode usar o jQuery para colocar (ou tirar) uma classe que irá mudar as propriedades desse elemento, dai em diante, a transition irá animar essa troca. Exemplo:

$('#block').click(function() {
    $(this).toggleClass('mover');
});
#block {
    width:50px;
    height:50px;
    background-color:blue;
    position:relative;
    left:0;
    transition:left .5s linear;
}

#block.mover {
    left:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block"></div>

E um detalhe, você utilizou um segundo parâmetro no comando toggleClass em sua pergunta. Isso não está errado, porém esse segundo parâmetro só funciona se estiver a utilizar o jQuery UI.

3
  • Rafael me diz uma coisa, eu tenho um id assim #id{display:none;opacity:0;transition: all 1s linear;} e chamo o toggle #id.toggle{display:block;opacity:1;}, mas ele fica sem animação nenhuma. Eu acho que é por causa do display. Tem algo que eu possa fazer? 20/04/2015 às 17:43
  • 1
    Isso acontece porque a transition não afeta a propriedade display, o ideal seria utilizara apenas a propriedade opacity: jsfiddle.net/th6w20us Existem alguns artigos que cuidam desse assunto: impressivewebs.com/animate-display-block-none 20/04/2015 às 17:49
  • 1
    Uma solução rápida e fácil é usar a função fadeToggle, ela ja cuida disso tudo fazendo seu elemento aparecer e sumir do jeito que você quer. Exemplo: jsfiddle.net/th6w20us/1 20/04/2015 às 17:52

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 .