When HTML was being developed in the 1990's, I remember using the BLINK tag. It was a great way to make text have a semi-animated effect; with the text alternating between opaque and translucent text. Nowadays with javascript we can make this effect more subtle and much smoother. A simple example of this would be a button that when clicked will change a line of text inside the DOM. The change in this example is a fade similar to the effect of the BLINK tag mentioned previously. We simply use a method fadein or fadeOut. An example code:
$('#buttonThatWillFadeOutText').click( function(){ $('#textThatWillFade').fadeOut(); } );
OR
$('#buttonThatWillFadeTextBackIntoPage').click( function(){ $('#textThatWillFade').fadeIn(); } );
With the top example fading the text out of the page, and the bottom example being a button that when clicked will fade that same text back into the page. In other words, it will become invisible and then visible again. Another similar animation method that is basically another version of the BLINK tag is the toggle() method. An example of this would be through a button to activate its effect on the text:
$('#buttonThatFadesTextBackAndForth').click( function(){ $('#textThatFadesInAndOut').toggle('slow'); } );
The toggle method will take a duration of time to toggle back and forth and in addition you can include a callback function if you want to add something else to this text change.
No comments:
Post a Comment