1

DESCRIÇÃO:
Estou querendo usar o Animate.css no meu projeto, mas estou meio perdido, não entendo nada de jQuerry.

PROBLEMA:
Fiz o passo passo assim como manda no GitHub porém não funciona, sei que está faltando algo mas não sei como proceder.

  • Tenho o css importado no meu código
  • Os objetos a serem animados já estão com suas marcações feitas

mas tenho algumas dúvidas, tipo:

  • Onde coloco esse código que é fornecido no tutorial do github? $('#yourElement').addClass('animated bounceOutLeft');, coloco ele dentro de uma tag script, sem nenhum Function? e Se tiver functoin, qual função eu chamo?

  • Como eu faço pra que essa função de animar seja ativada ao dar hover?

Segue link no JSFiddle
Obs: Não consegui anexar o animated.css via cdn

3
  • Pode colocar o seu código num jsFiddle e explicar o que quer fazer de animação e com que elemento? assim percebemos melhor o seu problema...
    – Sergio
    Commented 1/12/2014 às 21:01
  • Então Vinicius. Eu acho que como é elemento do Jquery, deve-se colocar em uma function. Tente colocar e veja se funciona. Se não, poste do jsFiddle pro pessoal ajudar ! Commented 1/12/2014 às 21:05
  • Pergunta editada com o link pra o fiddle Commented 2/12/2014 às 13:41

1 Resposta 1

5

Como é uma animação, o legal é que ele apareça quando um evento acontecer, por isso que no repositório git do Animate.css tem o exemplo:

$('#yourElement').addClass('animated bounceOutLeft');

Ou seja, você vai executar essa linha quando um evento acontecer. Como você solicitou que o evento seja de hover esta ai o codigo para ser colocado dentro de uma tag script:

<script>
    $('#flipCard')
      .mouseover(function(){
        $('#flipCard').addClass('animated flipInX');  
      })
      .mouseout(function(){
        $('#flipCard').removeClass('animated flipInX');  
      });
</script>

Esse trecho de código adiciona a classe quando passa o mouse em cima e remove classe quando o mouse sai.

O efeito utilizado foi o flipInX. Mas tem outros como flipInY, flipOutX, flipOutY.

A velocidade da animação pode ser definida em um css:

#flipCard {
 -vendor-animation-duration: 3s;
 -vendor-animation-delay: 2s;
 -vendor-animation-iteration-count: infinite;
}

É só trocar o vendor pelo prefixo que você quer (webkit, moz, o)

Segue o JSFiddle.

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 .