<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

<Javascript Fade animation ⁄ >




clicks: 15852 15852 2009-04-11 2009-04-11 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This



As you probably know JavaScript has animation capabilities too, I'll talk about that in this snippet, making focus on a fading animation.

It'll be a simple fading animation script, but I hope it'll help you in some way. Nowadays with all frameworks around, it's a very straightforward these kind of user interactions. Please note that these animations may be CPU intensive, so don't animate all your page ^_^''.


Here goes the code:


style.css, just a few layout tweaks, nothing "important" for our script.

  1. body{
  2. font-family: Tahoma;
  3. font-size: 62.5%;
  4. }
  5.  
  6. #console{
  7. font-size: 1.2em;width: 10em;height: 3em;line-height: 3em;padding: .4em;
  8. color: #204A87;border: solid .1em #A40000;background-color: #EDD400;
  9. text-align: center;font-weight: 700;
  10. }
  11.  
  12. #console2{
  13. font-size: 1.1em;
  14. color: #900;
  15. }
  16.  
  17. #txt1, #txt2, #txt3, #txt4, #txt5, #txt6 {
  18. padding: .2em;border: solid .1em #A40000; margin: .5em; text-align: center;
  19. width: 1em; height: 1em; line-height: 1em;
  20. }




Fader.js, our main class. It will have all animation functionalities. It has a queue built-in, this is, you can have many animations in queue, the next one will only start when the previous finished, this is for each instance, you can run multiple animations simultaneous, as long if you create multiple Fader objects instances.

  1. /**
  2. * Fader Class
  3. *
  4. * @author: pedrocorreia.net
  5. *
  6. * @param Object Optional, if not specified, animation settings, must do it.
  7. *
  8. * @return Function Set
  9. * @return Function Fade
  10. * @return Function Add
  11. * @return Function Toggle
  12. * @return Function Clear
  13. *
  14. */
  15. var Fader = function( /**o*/ ) {
  16.  
  17. /**
  18. * Get Html Object reference, by its ID
  19. *
  20. * @param String Id Object
  21. * @return Object
  22. */
  23. var $ = function(id) {return document.getElementById(id); };
  24.  
  25. /**
  26. * Set our html object to animate
  27. *
  28. * @param Object
  29. */
  30. var _SetObject = function(el){
  31. o = (el && typeof el !== "object") ? $(el) : el;
  32. };
  33.  
  34. //our html object reference
  35. var o = "";
  36. //set our html object to animate
  37. _SetObject(arguments[0]);
  38.  
  39. //our queue animation
  40. var _queue = [];
  41.  
  42. /**
  43. * Add animation to queue
  44. *
  45. * @param Object Animation Settings
  46. * @return this
  47. */
  48. var _AddQueue = function(anim) {
  49. _queue.push(anim);
  50. return this;
  51. };
  52.  
  53. /**
  54. * Clear queue
  55. *
  56. * @return this
  57. */
  58. var _Clear = function(){
  59. _queue = [];
  60. return this;
  61. };
  62.  
  63. /**
  64. * Toggle last animation added
  65. *
  66. * @return this
  67. */
  68. var _Toggle = function() {
  69. var _anim = _queue[_queue.length-1];
  70. if(_anim){
  71. _AddQueue({
  72. o: _anim.o,
  73. value: (_anim.value > 50) ? 0 : 100,
  74. step: _anim.step,
  75. speed: _anim.speed,
  76. direction: (_anim.direction === "down") ? "up" : "down",
  77. callback: _anim.callback
  78. });
  79. }
  80. return this;
  81. };
  82.  
  83. /**
  84. * Remove animation from queue
  85. *
  86. * @return this;
  87. */
  88. var _RemoveFromQueue = function() {
  89. _queue.splice(0,1);
  90. return this;
  91. };
  92.  
  93. /**
  94. * Start animation
  95. * When current animation's finished it'll check if queue's empty
  96. */
  97. var _Animate = function() {
  98. var anim=(_queue[0] || null);
  99. if(!anim){return;} //check if we have an animation in queue
  100.  
  101. if(typeof anim.callback==="function") {anim.callback.apply(this);}
  102. if(anim.o) { _SetObject(anim.o); }
  103.  
  104. var interval = setInterval(
  105. function() {
  106. anim.value += (anim.direction==="up" ? anim.step : -anim.step);
  107. if (anim.value <= 0 || anim.value>=100) {
  108. _Set((anim.value<=0)?0:100);
  109. clearInterval(interval);
  110. _next();
  111. }
  112. _Set(anim.value);
  113. }, anim.speed);
  114. };
  115.  
  116. /**
  117. * Next Animation in queue
  118. **/
  119. var _next = function(){
  120. _RemoveFromQueue();
  121. _Animate();
  122. };
  123.  
  124. /**
  125. * Set Opacity value
  126. *
  127. * @param Int
  128. */
  129. var _Set = function(value) {
  130. if(!o) {return; }
  131. o.style.zoom = 1; //hack IE
  132. o.style.opacity = value / 100;
  133. o.style.filter = 'alpha(opacity=' + value + ')';
  134. };
  135.  
  136. return {
  137. Set: _Set,
  138. Fade: _Animate,
  139. Add: _AddQueue,
  140. Toggle: _Toggle,
  141. Clear: _Clear
  142. };
  143. };




Our fading animation object has 5 attributes:

  • o - html object reference, it's optional if you already specified when you created the instance;

  • value - opacity value

  • step - increment or decrement value

  • speed - time in miliseconds that opacity will be incremented or decremented

  • direction - only 2 possible choices, up or down

  • callback - you can specify a function that will run each time the animation starts (optional)



See this example:


var fade=new Fader();
fade.Add(
  {o: "console2", value: 100, step: 10, speed: 200, direction: "down"}
).Toggle().Fade();


We're just instructing Fader class to animate our html object id="console2", to start fading at 100, decrementing 10 in each step, at every 200milliseconds; furthermore we just want to Toggle the animation (this is, reverse the last sequence added, by just switching value and direction), and start immediately the fading sequence.
The example above it's a simple fade-out/ fade-in sequence, but you can make more complex animations.







Init.js, let's create our object and add some animations. I just added the animations on window load, of course you can do it in other event, for example, button click, mouseclick, mouseover, etc, etc.

  1. /**
  2. * @author pedrocorreia.net
  3. */
  4. window.onload = function() {
  5.  
  6. //auxiliary array to example purposes
  7. var messages = [
  8. "Message n.º 1", "Message n.º 2", "Message n.º 3",
  9. "Message n.º 4", "Message n.º 5", "Message n.º 6"
  10. ];
  11.  
  12. //animation sequence
  13. var o=document.getElementById("msg");
  14. var fade=new Fader(o);
  15. for (var i=0, count=messages.length; i<count;i++){
  16. fade.Add({
  17. value: 100,
  18. step: 10,
  19. speed: 200,
  20. direction: "down",
  21. callback: function (value){
  22. return function (){
  23. o.innerHTML=value;
  24. };
  25. }(messages[i])
  26. }).Toggle();
  27. }
  28. fade.Fade();
  29. fade=null; //clean resource
  30. //
  31.  
  32. //another animation
  33. var fade=new Fader();
  34. fade.Add(
  35. {o: "console2", value: 100, step: 10, speed: 200, direction: "down"}
  36. ).Toggle().Fade();
  37. fade=null; //clean resource
  38. //
  39.  
  40. //another animation sequence
  41. var fade=new Fader();
  42. for (var i=0, count=messages.length; i<count;i++){
  43. var obj=document.getElementById("txt"+(i+1));
  44. fade.Add({
  45. o: obj,
  46. value: 1,
  47. step: 10,
  48. speed: 200,
  49. direction: "up",
  50. callback: function (value, obj){
  51. return function (){
  52. obj.innerHTML=value;
  53. };
  54. }(i+1, obj)
  55. }).Toggle();
  56. }
  57. fade.Fade();
  58. fade=null; //clean resource
  59. //
  60. };




Our html file:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Fader</title>
  5. <link rel="Stylesheet" href="style.css" />
  6. <script type="text/javascript" src="Fader.js"></script>
  7. <script type="text/javascript" src="Init.js"></script>
  8. </head>
  9. <body>
  10. <div id="console"><span id="msg"></span></div>
  11. <br />
  12. <div id="console2">Another simple animation</div>
  13. <br />
  14. <div id="txt1"></div> <div id="txt2"></div> <div id="txt3"></div>
  15. <div id="txt4"></div> <div id="txt5"></div> <div id="txt6"></div>
  16. </body>
  17. </html>





Here's a short video of this script working:









Just a quick note, apparently setting alpha/ opacity value in IE only works in a html object with a position set, to bypass this issue this script uses "zoom: 1", so if zoom conflicts with your script you can freely change it, but you have to set a position.


If you have any doubt or found any error, please drop me an email.









clicks: 15852 15852 2009-04-11 2009-04-11 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This