Skip to main content
adicionou 202 caracteres ao conteúdo
Fonte Link
Gabriel Rodrigues
  • 16,2mil
  • 14
  • 62
  • 124

No Github do daneden ensina como fazer isso usando jQuery.

Exemplo:

$.fn.extend({
  animateCss: function(animationName) {
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);
    });
    return this;
  }
});

/*  
setInterval(function() {
  $('.p1').animateCss('bounce');
  $('.p2').animateCss('pulse');
}, 3000);
*/
$(".p2").addClass('hide');

$(".btnFlip").click(function () {
  $('.p1').toggleClass('hide').animateCss('bounce''flipOutX');
  $('.p2').toggleClass('hide').animateCss('flipInX');
});
.hide{
 display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />

<p class="p1">Click me away!</p>
<p class="p2">Click me too!</p>
<br>

<button class="btnFlip">Click</button>

Você pode criar uma function do jQuery para simplificar todo o processo, nesta do exemplo animateCss() recebe o nome do efeito como parâmetro. Por dentro da function ela aguarda toda a animação acabar para remover as propriedades da mesma e assim rodar novamente.

Você pode definir também um setInterval() para disparar a animação de tempos em tempos.

No Github do daneden ensina como fazer isso usando jQuery.

Exemplo:

$.fn.extend({
  animateCss: function(animationName) {
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);
    });
    return this;
  }
});

setInterval(function() {
  $('.p1').animateCss('bounce');
  $('.p2').animateCss('pulse');
}, 3000);


$(".btnFlip").click(function () {
  $('.p1').animateCss('bounce');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />

<p class="p1">Click me away!</p>
<p class="p2">Click me too!</p>
<br>

<button class="btnFlip">Click</button>

Você pode criar uma function do jQuery para simplificar todo o processo, nesta do exemplo animateCss() recebe o nome do efeito como parâmetro. Por dentro da function ela aguarda toda a animação acabar para remover as propriedades da mesma e assim rodar novamente.

Você pode definir também um setInterval() para disparar a animação de tempos em tempos.

No Github do daneden ensina como fazer isso usando jQuery.

Exemplo:

$.fn.extend({
  animateCss: function(animationName) {
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);
    });
    return this;
  }
});

/*  
setInterval(function() {
  $('.p1').animateCss('bounce');
  $('.p2').animateCss('pulse');
}, 3000);
*/
$(".p2").addClass('hide');

$(".btnFlip").click(function () {
  $('.p1').toggleClass('hide').animateCss('flipOutX');
  $('.p2').toggleClass('hide').animateCss('flipInX');
});
.hide{
 display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />

<p class="p1">Click me away!</p>
<p class="p2">Click me too!</p>
<br>

<button class="btnFlip">Click</button>

Você pode criar uma function do jQuery para simplificar todo o processo, nesta do exemplo animateCss() recebe o nome do efeito como parâmetro. Por dentro da function ela aguarda toda a animação acabar para remover as propriedades da mesma e assim rodar novamente.

Você pode definir também um setInterval() para disparar a animação de tempos em tempos.

Fonte Link
Gabriel Rodrigues
  • 16,2mil
  • 14
  • 62
  • 124

No Github do daneden ensina como fazer isso usando jQuery.

Exemplo:

$.fn.extend({
  animateCss: function(animationName) {
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);
    });
    return this;
  }
});

setInterval(function() {
  $('.p1').animateCss('bounce');
  $('.p2').animateCss('pulse');
}, 3000);


$(".btnFlip").click(function () {
  $('.p1').animateCss('bounce');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />

<p class="p1">Click me away!</p>
<p class="p2">Click me too!</p>
<br>

<button class="btnFlip">Click</button>

Você pode criar uma function do jQuery para simplificar todo o processo, nesta do exemplo animateCss() recebe o nome do efeito como parâmetro. Por dentro da function ela aguarda toda a animação acabar para remover as propriedades da mesma e assim rodar novamente.

Você pode definir também um setInterval() para disparar a animação de tempos em tempos.