From 7414641a8dbaf917e106895d64f54e1c401f28f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Thu, 23 May 2013 13:18:58 -0400 Subject: [PATCH 1/2] Documented color animation. --- pages/color-animation.md | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 pages/color-animation.md diff --git a/pages/color-animation.md b/pages/color-animation.md new file mode 100644 index 00000000..4c749925 --- /dev/null +++ b/pages/color-animation.md @@ -0,0 +1,40 @@ + + +jQuery UI effects core adds the ability to animate color properties using `rgb()`, +`rgba()`, hex values, or even color names such as `"aqua"`. Simply include the +jQuery UI effects core file and [`.animate()`](http://api.jquery.com/animate/) +will gain support for colors. + +The following properties are supported: + +* `backgroundColor` +* `borderBottomColor` +* `borderLeftColor` +* `borderRightColor` +* `borderTopColor` +* `color` +* `columnRuleColor` +* `outlineColor` +* `textDecorationColor` +* `textEmphasisColor` + +Support for color animation comes from the +[jQuery Color plugin](https://github.com/jquery/jquery-color). The Color plugin +provides several functions for working with colors. For full documentation, please +see the [jQuery Color documentation](https://github.com/jquery/jquery-color#readme). + +## Class Animations + +While there are use cases for directly animating individual color properties, it +is often a better approach to contain the styles in a class. jQuery UI provides +a few methods which will animate the addition or removal of a CSS class, +specifically [`.addClass()`](/addClass/), [`.removeClass()`](/removeClass/), +[`.toggleClass()`](/toggleClass/), and [`.switchClass()`](/switchClass/). These +methods will automatically determine which properties need to change and apply +the appropriate animations. From b7ddd1d8078d35d824184fa99e759a8ef08b7fb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Thu, 23 May 2013 13:43:47 -0400 Subject: [PATCH 2/2] demo --- pages/color-animation.md | 8 ++++++++ resources/color-animation.html | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 resources/color-animation.html diff --git a/pages/color-animation.md b/pages/color-animation.md index 4c749925..7e40ef64 100644 --- a/pages/color-animation.md +++ b/pages/color-animation.md @@ -38,3 +38,11 @@ specifically [`.addClass()`](/addClass/), [`.removeClass()`](/removeClass/), [`.toggleClass()`](/toggleClass/), and [`.switchClass()`](/switchClass/). These methods will automatically determine which properties need to change and apply the appropriate animations. + +## Example + +```html +@partial(resources/color-animation.html) +``` + + diff --git a/resources/color-animation.html b/resources/color-animation.html new file mode 100644 index 00000000..705cece3 --- /dev/null +++ b/resources/color-animation.html @@ -0,0 +1,34 @@ + + + + + Color Animation Demo + + + + + + + +
color animations
+ + + + + +