jQuery textilate .js -如何“重置”元素HTML并重新启动动画

jQuery Textillate.js - how to "reset" element html and re-start animation

本文关键字：HTML 元素 重新启动 动画 重置 js textilate 如何 jQuery      更新时间：2023-09-26

我使用textilate .js (http://jschr.github.io/textillate/)在html的一个跨度动画文本。

动画是手动触发按钮点击('in')。
在动画之后/期间，用户可以点击"重置"按钮将span重新设置回起始html(隐藏的)。然后动画应该再次手动运行"在"按钮点击，但我不能让它工作。

为了更容易看到我在做什么，我创建了这个提琴:

http://jsfiddle.net/nlapolla/mGgd5/225/

下面是Fiddle代码:

$('#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');
});
#tlt {
    font-size:30px;
}
.hideme {
    visibility:hidden;
}
<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>

任何想法都将非常感激!我一直试图让这个工作几个小时-搜索SO，发现了很多很好的建议，但在这种情况下没有任何帮助…谢谢你提供的任何帮助。: o)

我找不到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 */
相关文章：