add animation simple (queue, delay ...)

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 (file)
index 0000000..b0262a4
--- /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 (file)
index 0000000..be1e1ec
--- /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 (file)
index 0000000..83ab64c
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/AnimationsSample.html
@@ -0,0 +1,31 @@
+<!doctype html>\r
+<html>\r
+<head>\r
+<title>GQuery Effects Sample</title>\r
+<script language="javascript" src="AnimationsSample.nocache.js"></script>\r
+<style type="text/css">\r
+       body {\r
+           font-family: Helvetica;\r
+       }\r
+       .reset {\r
+           float: left;\r
+       }\r
+       .foo {\r
+           border: 1px solid black;\r
+           height:200px;\r
+        width:200px;\r
+       }\r
+</style>\r
+</head>\r
+<body>\r
+<h1>Animation, queue and  delay methods</h1>\r
+<p>This example shows you how using gwtquery to make animation</p>\r
+<div>\r
+<button id="startMove">start movement animation</button><button id="stopMove">stop movement animation</button>\r
+</div>\r
+<div>\r
+<button id="startColor">start color animation</button><button id="stopColor">stop color animation</button>\r
+</div>\r
+<div class="foo"></div>\r
+</body>\r
+</html>\r