From af15f2c4a192dea02aab9e519defc68c71763ec4 Mon Sep 17 00:00:00 2001 From: yvesf Date: Mon, 22 Nov 2010 14:34:55 +0100 Subject: jquery ui --- static/development-bundle/docs/animate.html | 78 +++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 static/development-bundle/docs/animate.html (limited to 'static/development-bundle/docs/animate.html') diff --git a/static/development-bundle/docs/animate.html b/static/development-bundle/docs/animate.html new file mode 100644 index 0000000..0e55820 --- /dev/null +++ b/static/development-bundle/docs/animate.html @@ -0,0 +1,78 @@ +

The jQuery UI effects core extends the animate function to be able to animate colors as well. It's heavily used by the class transition feature and it's able to color animate the following properties: +

+ +

with one of the following combinations: +

+ +


+

+
NameType
Example: +
+ +
+A simple color animation.
+

+
$(".block").toggle(function() {
+    $(this).animate({ backgroundColor: "black" }, 1000);
+},function() {
+    $(this).animate({ backgroundColor: "#68BFEF" }, 500);
+});
+
+
+

+

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
+                    "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <script src="http://code.jquery.com/jquery-latest.js"></script>
+  
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+
+  <script>
+  $(document).ready(function(){
+    $(".block").toggle(function() {
+    $(this).animate({ backgroundColor: "black" }, 1000);
+},function() {
+    $(this).animate({ backgroundColor: "#68BFEF" }, 500);
+});
+
+  });
+  </script>
+  <style>
+  .block { 
+    color: white;
+    background-color: #68BFEF;
+    width: 150px; 
+    height: 70px;
+    margin: 10px; 
+  }
+  </style>
+</head>
+<body>
+  <div class="block"> Click me</div>
+</body>
+</html>
+
+

+

+

NameType
+

+ + -- cgit v1.2.1