add animation simple (queue, delay ...)

3 files changed, 138 insertions, 0 deletions

diff --git a/samples/src/main/java/gwtquery/samples/AnimationsSample.gwt.xml b/samples/src/main/java/gwtquery/samples/AnimationsSample.gwt.xml
new file mode 100644
index 00000000..b0262a40
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/AnimationsSample.gwt.xml
@@ -0,0 +1,8 @@
+<module  rename-to='AnimationsSample'>
+	<inherits name='com.google.gwt.query.Query' />
+	<inherits name='com.google.gwt.user.theme.chrome.Chrome' />
+	<entry-point
+		class="gwtquery.samples.client.AnimationsSample">
+	</entry-point>
+</module>
+
diff --git a/samples/src/main/java/gwtquery/samples/client/AnimationsSample.java b/samples/src/main/java/gwtquery/samples/client/AnimationsSample.java
new file mode 100644
index 00000000..be1e1ec1
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/client/AnimationsSample.java
@@ -0,0 +1,99 @@
+/*
+ * Copyright 2011, The gwtquery team.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package gwtquery.samples.client;
+
+import static com.google.gwt.query.client.GQuery.$;
+import static com.google.gwt.query.client.GQuery.lazy;
+
+import com.google.gwt.core.client.EntryPoint;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.query.client.Function;
+import com.google.gwt.query.client.Properties;
+import com.google.gwt.query.client.css.CSS;
+import com.google.gwt.query.client.css.Length;
+import com.google.gwt.query.client.css.RGBColor;
+import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing;
+
+public class AnimationsSample implements EntryPoint {
+
+  
+  public void onModuleLoad() {
+    doMoveAnimation();
+    doColorAnimation();
+    
+    $("#stopMove").click(new Function(){    
+      public void f() {
+        $(".foo").clearQueue().stop();
+       
+      }
+    });
+    
+    $("#stopColor").click(new Function(){     
+      public void f() {
+        $(".foo").clearQueue("colorQueue");
+      }
+    });
+    
+    $("#startMove").click(new Function(){    
+      public void f() {
+        $(".foo").css(CSS.LEFT.with(Length.px(0)));
+        doMoveAnimation();
+      }
+    });
+    
+    $("#startColor").click(new Function(){     
+      public void f() {
+        doColorAnimation();
+      }
+    });
+
+  }
+  
+  private void doColorAnimation(){
+    $(".foo")
+      .queue("colorQueue", lazy().css(CSS.BACKGROUND_COLOR.with(RGBColor.RED)).dequeue("colorQueue").done())
+      .delay(500, "colorQueue")
+      .queue("colorQueue", lazy().css(CSS.BACKGROUND_COLOR.with(RGBColor.BLACK)).dequeue("colorQueue").done())
+      .delay(500, "colorQueue")
+      .queue("colorQueue", new Function() {
+            @Override
+            public void f() {
+              doColorAnimation();
+              $(".foo").dequeue("colorQueue");
+            }
+      
+            @Override
+            public void cancel(Element e) {
+              $(".foo").clearQueue().stop();
+            }
+        });
+    
+  }
+  
+  private void doMoveAnimation(){
+    $(".foo").animate(Properties.create("{left:'+=1000'}"), 2000, Easing.SWING)
+        .delay(500)
+        .animate("left:'-=1000'", 2000)
+        .queue(new Function() {
+          @Override
+          public void f() {
+            doMoveAnimation();
+            $(".foo").dequeue();
+          }
+        });
+    
+  }
+}
diff --git a/samples/src/main/java/gwtquery/samples/public/AnimationsSample.html b/samples/src/main/java/gwtquery/samples/public/AnimationsSample.html
new file mode 100644
index 00000000..83ab64ca
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/AnimationsSample.html
@@ -0,0 +1,31 @@
+<!doctype html>

+<html>

+<head>

+<title>GQuery Effects Sample</title>

+<script language="javascript" src="AnimationsSample.nocache.js"></script>

+<style type="text/css">

+	body {

+	    font-family: Helvetica;

+	}

+	.reset {

+	    float: left;

+	}

+	.foo {

+	    border: 1px solid black;

+	    height:200px;

+        width:200px;

+	}

+</style>

+</head>

+<body>

+<h1>Animation, queue and  delay methods</h1>

+<p>This example shows you how using gwtquery to make animation</p>

+<div>

+<button id="startMove">start movement animation</button><button id="stopMove">stop movement animation</button>

+</div>

+<div>

+<button id="startColor">start color animation</button><button id="stopColor">stop color animation</button>

+</div>

+<div class="foo"></div>

+</body>

+</html>