4

我的代码如下：

<div class="header">
<h1>My text</h1>
</div>
<script>
$(function(){
    $('h1').textillate({in:{} , out:{effect:'hinge'}});
});
</script>

在这方面，in-animation效果很好，但out-animation不起作用。您可以参考textillate.js jquery 插件文档。

4

5 回答 5

5

不幸的是，输出效果仅作为过渡到下一个效果的一种方式。尝试使用空文本作为下一个过渡：

// html
<h1 class="tlt">
    <ul class="texts">
         <li>Some Title</li>   
         <li> </li>
    </ul>
</h1>

// javascript
$('.tlt').textillate();

jsFiddle：http: //jsfiddle.net/jschr/y9m3b/

https://github.com/jschr/textillate/issues/5

于 2013-07-02T14:39:08.867 回答
2

将 textilate('out') 添加到“in”效果的回调函数对我有用。

此代码在“fadeIn”效果之后执行“fadeOut”效果。

$('.myclass').textillate({
    loop: false,
    in : {
        effect: 'fadeIn',
        callback: function() {
            $('.myclass').textillate('out');
        }
    },
    out: {
        effect: 'fadeOut',
    }
});
于 2015-06-09T06:02:52.170 回答
1

很棒的插件！如果不使用loop: true选项，我将无法发挥作用：

$(function () {
    $('h1').textillate({ in : {
            effect: 'fadeInLeftBig'
        },
        out: {
            effect: 'hinge'
        },
        loop: true
    });
});

工作小提琴：http: //jsfiddle.net/IrvinDominin/zHKLC/2/

于 2013-06-30T20:41:49.873 回答
0

这是一个应该修复的缺陷，但回调允许任何事情成为可能，所以我用它来做一些非常酷的事情。我这样解决了这个问题。

    $('.intro_1').textillate({
    loop: true,
    in:{ 
        effect: 'rollIn' 
    },
    out: { 
        effect: 'rollOut',
        callback: function () 
        {
            $('.intro_1').hide();
        }
    }
});
于 2015-03-31T21:40:19.763 回答
0

在 in 参数的回调函数上使用 $element.textillate('out') ，它可以工作

于 2015-05-21T11:00:05.057 回答