tego

tego()

Tego (latin): to cover, bury, conceal, hide, protect, shield.

Tego animation function is similar to decode(), but each share is revealed individually.

Usage
Animate the provided text into the target.

1
$('#target_div_id').tego({text: 'Text to animate');

The above will take the provided text and animate every 150ms 5 times, 4 times a random character and finally on the fifth animation the actual character will be revealed, after which tego will move onto the next character until the end.

Example 1
Standard just defined text



tego()

Source

1
2
3
4
5
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script><br />
<script src="http://svn.saiweb.co.uk/branches/jquery_plugin/tags/0.3/jquery.saiweb.min.js" type="text/javascript"></script><br />
<a name="tego"></a>
<div id='tego_div_id'></div>
<a href="#tego" onclick="$('#tego_div_id').tego({text: 'This text is being animated by tego'});">tego()</a>

Example 2
anim count 5, random anim factor (ranim) 5, delay 10ms.



tego_2()

1
2
3
4
5
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script><br />
<script src="http://svn.saiweb.co.uk/branches/jquery_plugin/tags/0.3/jquery.saiweb.min.js" type="text/javascript"></script><br />
<a name="tego_2"></a>
<div id='tego_2_div_id'></div>
<a href="#tego_2" onclick="$('#tego_2_div_id').tego({delay: 10, text: 'This text is being animated by tego', anim: 10, ranim: 5});">tego_2()</a>

Advanced

1
2
3
4
5
6
$('#tego_div_id').tego({
    delay: 150,
    text: 'This text is being animated by tego',
    anim: 5,
    ranim: 0
});

All the options above can be using singularly or together, however you must at least define some text to animate.

  • delay: the time in milliseconds between animation
  • text: The real text to be used in the animation
  • anim: how many animations to perform
  • ranim: A randomizing element, i.e if ranim = 5 will add between 1 and 5 animations to anim
1
2
3
4
$('#tego_div_id').tego({text: 'This is some replacement text'});
$('#tego_div_id').tego({text: 'This is some replacement text', delay: 150});
$('#tego_div_id').tego({text: 'This is some replacement text', anim: 5});
$('#tego_div_id').tego({text: 'This is some replacement text', ranim: 5});

NOTE: If you have firebug installed you can try all these examples in the page.

Leave a Reply

Creative Commons License