jQuery点击函数在尝试使用Textillate.js进行动画时仅起作用一次。

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'
        }
    });
});

- KevDev

---

从我所看到的，只有一个“in”的动画，这可能在完成后无法在点击上起作用。 - Nicklas Nygren

你尝试过定义一个退出动画吗？ - Allan Kimmer Jensen

你想要让图形不停地弹入吗？ - Pandiyan Cool

我刚刚尝试了一下输出动画，但仍然没有任何变化。我只想在单击文本时重新进行动画处理。 - KevDev

Answer 1

您需要在点击函数之外初始化textillate插件，然后在点击函数内触发api。

这样应该可以：

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

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

- BMH

---

另外，您可以调用 asdf.textillate('start') 而无需保存数据对象。 - jschr

Answer 2

试试这个

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

200 是每 200 毫秒后进行动画。

- Shahdat