Question

我在跨度的html上使用Textillate.js（http://jschr.github.io/textillate/）制作动画文字。

动画是通过按钮点击手动触发的（＆＃39;在＆＃39;中）在动画之后/期间，用户可以点击＆＃34;重置＆＃34;按钮将范围重新设置回起始html（隐藏）。然后动画应该在＃34;＆＃34;中再次手动运行。按钮单击，但我无法让它工作。

为了让我很容易看到我想要做什么，我创造了这个小提琴：

这是小提琴代码：

＆＃13;

$('#tlt').textillate({ 
    autoStart: false,
    loop: true,
    in : { effect: 'bounceInRight' }
});

$('.in').on('click', function () {
    $('#tlt').textillate('in'); 
});

$('.out').on('click', function () {
    $('#tlt').textillate('out'); 
});

$('.reset').on('click', function () {
    $('#tlt').html('Some text');
});

＆＃13;

#tlt {
    font-size:30px;
}
.hideme {
    visibility:hidden;
}

＆＃13;

<link href="http://jschr.github.io/textillate/assets/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://jschr.github.io/textillate/assets/jquery.lettering.js"></script>
<script src="http://jschr.github.io/textillate/jquery.textillate.js"></script>

<span id="tlt" class='hideme'>Some text</span>
<br/>
<button class="in">in</button>
<button class="reset">Reset/Hide</button>

＆＃13;

真的很感激任何想法！我一直试图让这个工作几个小时 - 搜索SO并找到了很多很棒的建议，但在这种情况下没有任何帮助...感谢您提供的任何帮助。：O）

Answer 1

我找不到textillate的重新初始化事件，但你可以做的是，在重置时删除并重新创建元素。并将选项包装在一个函数中并在'in'单击时调用它。它会起作用，但我不是JS专家，所以非常确定有更好的方法可以做到这一点。

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

Here is the fiddle

Answer 2

我知道这篇文章已经很老了，但是我建立了一个名为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 */

jQuery Textillate.js - 如何＆＃34;重置＆＃34;元素html并重新开始动画

2 个答案: