jQuery click function only work once when trying to animate using Textillate.js

Question

I want to animate text using jQuery and Textillate.js but it only works once using .click(); it needs to refresh the browser to animate the text when click. I hope someone can help.

My HTML:

<h1 class="test">Im so handome!</h1>

And this is the JavaScript

var asdf = $('.test');
asdf.click(function() {
    asdf.textillate({
        in: {
            effect: 'bounceIn'
        }
    });
});

Answer 1

You should init the textillate plugin outside of click function, and then trigger the api within the click function.

This should work:

var asdf = $('.test');
asdf.textillate({
    autoStart: false,
    in: {
        effect: 'bounceIn'
    }
  });
var api = asdf.data('textillate');

asdf.click(function() {
  api.start();
});

Answer 2

try this

var asdf = $('.test');
asdf.click(function() {
   setInterval(function(){
   asdf.textillate({
    in: {
        effect: 'bounceIn'
    }}, 200); 
  });
});

200 is to animate after each 200 milisec.