Posted By

mifly on 03/11/08


Tagged

javascript


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

SpinZ
wizard04


Fade in/out with only one link


 / Published in: JavaScript
 

  1. function opacity(id, opacStart, opacEnd, millisec) {
  2. //speed for each frame
  3. var speed = Math.round(millisec / 100);
  4. var timer = 0;
  5.  
  6. //determine the direction for the blending, if start and end are the same nothing happens
  7. if(opacStart > opacEnd) {
  8. for(i = opacStart; i >= opacEnd; i--) {
  9. setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
  10. timer++;
  11. }
  12. } else if(opacStart < opacEnd) {
  13. for(i = opacStart; i <= opacEnd; i++)
  14. {
  15. setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
  16. timer++;
  17. }
  18. }
  19. }
  20.  
  21. //change the opacity for different browsers
  22. function changeOpac(opacity, id) {
  23. var object = document.getElementById(id).style;
  24. object.opacity = (opacity / 100);
  25. object.MozOpacity = (opacity / 100);
  26. object.KhtmlOpacity = (opacity / 100);
  27. object.filter = "alpha(opacity=" + opacity + ")";
  28. }
  29.  
  30. function shiftOpacity(id, millisec) {
  31. //if an element is invisible, make it visible, else make it ivisible
  32. if(document.getElementById(id).style.opacity == 0) {
  33. opacity(id, 0, 100, millisec);
  34. } else {
  35. opacity(id, 100, 0, millisec);
  36. }
  37. }
  38.  
  39. function blendimage(divid, imageid, imagefile, millisec) {
  40. var speed = Math.round(millisec / 100);
  41. var timer = 0;
  42.  
  43. //set the current image as background
  44. document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
  45.  
  46. //make image transparent
  47. changeOpac(0, imageid);
  48.  
  49. //make new image
  50. document.getElementById(imageid).src = imagefile;
  51.  
  52. //fade in image
  53. for(i = 0; i <= 100; i++) {
  54. setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
  55. timer++;
  56. }
  57. }
  58.  
  59. function currentOpac(id, opacEnd, millisec) {
  60. //standard opacity is 100
  61. var currentOpac = 100;
  62.  
  63. //if the element has an opacity set, get it
  64. if(document.getElementById(id).style.opacity < 100) {
  65. currentOpac = document.getElementById(id).style.opacity * 100;
  66. }
  67.  
  68. //call for the function that changes the opacity
  69. opacity(id, currentOpac, opacEnd, millisec)
  70. }

Report this snippet  

You need to login to post a comment.