Javascript jQuery Textillate.js-如何；重置"；元素html并重新启动动画

我在一段时间内使用html上的Textillate.js（）制作文本动画

通过点击按钮（“in”）手动触发动画。
在动画之后/期间，用户可以单击“重置”按钮将跨度重新设置回起始html（隐藏）。 然后，动画应该再次手动运行“在”按钮点击，但我不能让它工作

为了便于查看我要做的事情，我制作了这把小提琴：

以下是小提琴代码：

$（'#tlt'）.textillate（{
自动启动：错误，
循环：对，
在：{效果：'bounceInRight'}
});
$（'.in'）。在（'click'，函数（）{
$（'#tlt'）.textillate（'in'）；
});
$（'.out'）。在（'click'，函数（）{
$（'#tlt'）.textillate（'out'）；
});
$（'.reset'）。在（'click'，函数（）{
$（'#tlt'）.html（'Some text'）；
});
#tlt{
字体大小：30px；
}
希德姆先生{
可见性：隐藏；
}

一些文本


在里面
重置/隐藏
我找不到textillate的重新初始化事件，但您可以在重置时删除并重新创建元素。并将选项包装在函数中，然后在“in”单击时调用它。它会工作，但我不是一个JS专家，所以我非常肯定有更好的方法来做到这一点

function animate(el) {
  $(el).textillate({
    autoStart: false,
    loop: true,
    in : {
      effect: 'bounceInRight'
    }
  });
}

我知道这篇文章很老，但我构建了一个名为
retextillate
的通用函数，您可以使用该函数调用或重新调用元素上的textillate，并且：


执行您的初始呼叫
重新初始化同一元素上的给定效果
更改是调用
in
动画还是调用
out
动画，或者同时调用两者

这应涵盖一切：

function retextillate(element, in_effect = "", out_effect = "", type) {

    /* 
        element : html element with . or # symbol
        effect  : textillate/animate.css effect you're calling
        type    : either in, out, or both
    */

    $(element).textillate({
        loop: true,
        autoStart: false,           
        in : { 
            effect  : in_effect, 
            delay   : 40 
        },
        out : { 
            effect  : out_effect, 
            reverse : true,
            delay   : 40,
            callback : function() {             
                $(element).css('opacity', 0);
            }
        }
    }); 

    if ( type == 'in' ) {

        $(element).textillate('in');
        $(element).css('opacity', 1);

    } else if ( type == 'out' ) {

        $(element).textillate('out');       

    } else if ( type == 'both' ) {

        $(element).textillate('in');
        setTimeout( function() { 
            $(element).textillate('out');
        }, 1000);

    }

}

如果您是第一次初始化它，它将继续对元素调用textillate。为了正确利用这一点，您需要定义
In
效果和
out
效果，无论您是否计划使用它。如果不定义一个，它将默认为空，这是可以的

因此，不要在每个元素上运行此操作：

$('.my_element').textillate({
  in: { effect : 'slideInLeft' }
});

就这样说吧：

retextillate('.my_element', 'slideinleft', 'fadeOut', 'in');

您可以反复使用同一元素，而无需刷新页面：

retextillate('.my_element', 'slideInLeft', 'fadeOut', 'in'); /* will show the slideInLeft animation, then stop */
retextillate('.my_element', 'tada', '', 'in'); /* will show the tada animation, then stop */
retextillate('.my_element', 'tada', 'fadeOut', 'both'); /* will show the tada animation, then the fadout animation, then stop */
retextillate('.my_element', '', 'fadeOut', 'out'); /* will show the fadeout animation, then stop */

这里已经有人做了一把小提琴：谢谢——但实际上这就是我开始使用的小提琴——我用它作为小提琴的基础。问题是（除了需要在单击按钮之前先隐藏外），我需要它“重置”并立即隐藏-并保持隐藏状态，直到再次单击“in”按钮。原来的小提琴，重新开始，但它不会隐藏，直到手动触发显示和动画再次。我希望我说的有道理o） 抓住你了！我将创建一个提琴并将其作为答案发布。我没有“重置”，而是使用手动调用textillate“out”设置，延迟为零秒。然后我可以手动调用textillate“in”“。不过，您的解决方案也可以使用，我可能会在另一个项目中使用它。谢谢大家!@尼克，不客气。我相信你会在一段时间后找到更好的解决方案：）