javascript - 尝试使用 Textillate.js 进行动画处理时，jQuery 单击功能仅工作一次

Question

我想使用 jQuery 和Textillate.js为文本设置动画，但它只能使用一次.click()；单击时需要刷新浏览器才能为文本设置动画。我希望有人能帮帮忙。

我的 HTML：

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

这就是 JavaScript

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

Answer 1

您应该在 click 函数之外初始化textillate插件，然后在 click 函数中触发 api。

这应该有效：

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

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

Answer 2

尝试这个

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

200 是在每 200 毫秒后进行动画处理。