Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added Effect.Fade which smoothly turns opacity from 100 to 0 and then…

… hides the element #960 [thomas@fesch.at]

git-svn-id: http://svn-commit.rubyonrails.org/rails/trunk@1032 5ecf4fe2-1ee6-0310-87b1-e25e094e27de
  • Loading branch information...
commit b0c0c9c2ef908606c03e03c7db422fde703eaa99 1 parent b14e5d8
@dhh dhh authored
View
2  actionpack/CHANGELOG
@@ -1,5 +1,7 @@
*SVN*
+* Added Effect.Fade which smoothly turns opacity from 100 to 0 and then hides the element #960 [thomas@fesch.at]
+
* Fixed problem with page caching #958 [Rick Olson]
View
30 actionpack/lib/action_view/helpers/javascripts/prototype.js
@@ -452,3 +452,33 @@ Effect.Highlight.prototype = {
element.style.backgroundColor = "#ffff" + current.toColorPart();
}
}
+
+
+Effect.Fade = Class.create();
+Effect.Fade.prototype = {
+ initialize: function(element) {
+ this.element = $(element);
+ this.start = 100;
+ this.finish = 0;
+ this.current = this.start;
+ this.fade();
+ },
+
+ fade: function() {
+ if (this.isFinished()) { this.element.style.display = 'none'; return; }
+ if (this.timer) clearTimeout(this.timer);
+ this.setOpacity(this.element, this.current);
+ this.current -= 10;
+ this.timer = setTimeout(this.fade.bind(this), 100);
+ },
+
+ isFinished: function() {
+ return this.current <= this.finish;
+ },
+
+ setOpacity: function(element, opacity) {
+ opacity = (opacity == 100) ? 99.999 : opacity;
+ element.style.filter = "alpha(opacity:"+opacity+")";
+ element.style.opacity = opacity/100;
+ }
+}
View
30 railties/html/javascripts/prototype.js
@@ -452,3 +452,33 @@ Effect.Highlight.prototype = {
element.style.backgroundColor = "#ffff" + current.toColorPart();
}
}
+
+
+Effect.Fade = Class.create();
+Effect.Fade.prototype = {
+ initialize: function(element) {
+ this.element = $(element);
+ this.start = 100;
+ this.finish = 0;
+ this.current = this.start;
+ this.fade();
+ },
+
+ fade: function() {
+ if (this.isFinished()) { this.element.style.display = 'none'; return; }
+ if (this.timer) clearTimeout(this.timer);
+ this.setOpacity(this.element, this.current);
+ this.current -= 10;
+ this.timer = setTimeout(this.fade.bind(this), 100);
+ },
+
+ isFinished: function() {
+ return this.current <= this.finish;
+ },
+
+ setOpacity: function(element, opacity) {
+ opacity = (opacity == 100) ? 99.999 : opacity;
+ element.style.filter = "alpha(opacity:"+opacity+")";
+ element.style.opacity = opacity/100;
+ }
+}
Please sign in to comment.
Something went wrong with that request. Please try again.