Requires

Provides

Formerly Fx.Style, effect to transition any CSS property for an element.

License:
MIT-style license.
  1. 18
  2. 19
  3. 20
  4. 21
  5. 22
  6. 23
  7. 24
  8. 25
  9. 26
  10. 27
  11. 28
  12. 29
  13. 30
  14. 31
  15. 32
  16. 33
  17. 34
  18. 35
  19. 36
  20. 37
  21. 38
  22. 39
  23. 40
  24. 41
  25. 42
  26. 43
  27. 44
  28. 45
  29. 46
  30. 47
  31. 48
  32. 49
  33. 50
  34. 51
  35. 52
  36. 53
  37. 54
  38. 55
  39. 56
  40. 57
  41. 58
  42. 59
  43. 60
  44. 61
  45. 62
  46. 63
  47. 64
  48. 65
  49. 66
  50. 67
  51. 68
  52. 69
  53. 70
  54. 71
  55. 72
  56. 73
  57. 74
  58. 75
  59. 76
  60. 77
  61. 78
  62. 79
  63. 80
  64. 81
  65. 82
  66. 83
  67. 84
  68. 85
  69. 86
  70. 87
  71. 88
  72. 89
  73. 90
  74. 91
  75. 92
  76. 93
  77. 94
  78. 95
  79. 96
  80. 97
  81. 98
  82. 99
  83. 100
  84. 101
  85. 102
  86. 103
  87. 104
Fx.Tween = new Class({ Extends: Fx.CSS, initialize: function(element, options){ this.element = this.subject = document.id(element); this.parent(options); }, set: function(property, now){ if (arguments.length == 1){ now = property; property = this.property || this.options.property; } this.render(this.element, property, now, this.options.unit); return this; }, start: function(property, from, to){ if (!this.check(property, from, to)) return this; var args = Array.flatten(arguments); this.property = this.options.property || args.shift(); var parsed = this.prepare(this.element, this.property, args); return this.parent(parsed.from, parsed.to); } }); Element.Properties.tween = { set: function(options){ this.get('tween').cancel().setOptions(options); return this; }, get: function(){ var tween = this.retrieve('tween'); if (!tween){ tween = new Fx.Tween(this, {link: 'cancel'}); this.store('tween', tween); } return tween; } }; Element.implement({ tween: function(property, from, to){ this.get('tween').start(arguments); return this; }, fade: function(how){ var fade = this.get('tween'), o = 'opacity', toggle; how = [how, 'toggle'].pick(); switch (how){ case 'in': fade.start(o, 1); break; case 'out': fade.start(o, 0); break; case 'show': fade.set(o, 1); break; case 'hide': fade.set(o, 0); break; case 'toggle': var flag = this.retrieve('fade:flag', this.get('opacity') == 1); fade.start(o, (flag) ? 0 : 1); this.store('fade:flag', !flag); toggle = true; break; default: fade.start(o, arguments); } if (!toggle) this.eliminate('fade:flag'); return this; }, highlight: function(start, end){ if (!end){ end = this.retrieve('highlight:original', this.getStyle('background-color')); end = (end == 'transparent') ? '#fff' : end; } var tween = this.get('tween'); tween.start('background-color', start || '#ffff88', end).chain(function(){ this.setStyle('background-color', this.retrieve('highlight:original')); tween.callChain(); }.bind(this)); return this; } });