Out Animation in textillate.js not working

Question

My code is as follows:

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

In this case, in-animation works well, but out-animation does not work. You can refer to textillate.js jquery text plugins .

Answer 1

Output effects are only triggered as a way to move on to the next, unfortunately. Try using blank text as the following transition:

 // 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

Answer 2

Adding textilate ('out') to the callback function for the in effect that worked for me.

This code performs the "fadeOut" effect after the "fadeIn" effect.

 $('.myclass').textillate({ loop: false, in : { effect: 'fadeIn', callback: function() { $('.myclass').textillate('out'); } }, out: { effect: 'fadeOut', } }); 

Answer 3

Great plugin! Without using the loop: true option, I cannot let the effect work:

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

Working fiddle: http://jsfiddle.net/IrvinDominin/zHKLC/2/

Answer 4

This is a bug that needs to be fixed, but the callback allows anything to be possible, so I used this to do some pretty cool things. I solved this problem as follows.

  $('.intro_1').textillate({ loop: true, in:{ effect: 'rollIn' }, out: { effect: 'rollOut', callback: function () { $('.intro_1').hide(); } } }); 

Answer 5

Use the $ element.textillate ('out') function for the in parameter callback function, it works