jQuery Cycle Plugin with typewriter transition effect

Question

Hey,

Wondering if anyone knows how to achieve a typewriter effect with the jQuery Cycle plugin.

See here for desired effect: http://www.hungry-media.com/code/jQuery/tickerType/

Thanks. Dave

Answer 1

Why not just use the plugin you referenced? Doesn't look like the Cycle plugin was built for type-writer effects.

Answer 2

Try using Cycle's after and before transition callbacks to invoke other plugins on the element being displayed. You'll need to use a plugin dedicated only to the type effect, like Effects jTypeWriter to invoke the effect when an element is displayed.

$("#cycle-pane").cycle({
  before: function() { $(this).jTypeWriter(); }
});

<div id="cycle-pane">
  <div>First text</div>
  <div>Second text</div>
</div>

You'll need to keep an eye on the timing of Cycle transitions and the duration of the type effect and also any cleanup or reset that may need to be done if Cycle is running on a loop.