当尝试使用Textillate.js制作动画时，jQuery点击函数只能工作一次

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

本文关键字：函数 工作 一次 jQuery Textillate js 动画      更新时间：2023-09-26

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

我的HTML:

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

这是JavaScript

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

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

这应该有效：

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

尝试这个

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

200是在每200毫秒之后设置动画。

相关文章：