From: Julien Dramaix Date: Fri, 22 Apr 2011 09:09:14 +0000 (+0000) Subject: color animation examples X-Git-Tag: release-1.3.2~391 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=e5e2b652f0a3ad3ba3ee8da1a009bbad7c4f446e;p=gwtquery.git color animation examples --- diff --git a/samples/src/main/java/gwtquery/samples/ColorEffects.gwt.xml b/samples/src/main/java/gwtquery/samples/ColorEffects.gwt.xml new file mode 100644 index 00000000..7690f018 --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/ColorEffects.gwt.xml @@ -0,0 +1,8 @@ + + + + + + + diff --git a/samples/src/main/java/gwtquery/samples/client/effects/ColorEffectsSample.java b/samples/src/main/java/gwtquery/samples/client/effects/ColorEffectsSample.java new file mode 100644 index 00000000..ec9042f6 --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/client/effects/ColorEffectsSample.java @@ -0,0 +1,46 @@ +package gwtquery.samples.client.effects; + +import static com.google.gwt.query.client.GQuery.$; + +import com.google.gwt.core.client.EntryPoint; +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.plugins.effects.PropertiesAnimation.Easing; + +public class ColorEffectsSample implements EntryPoint { + + public void onModuleLoad() { + + $("#shoot").click(new Function() { + + public void f() { + $("body").animate("backgroundColor: 'red'", 400) + .delay(1000) + .animate("backgroundColor: 'white'", 2000); + } + + }); + + $("#startAnim2").click(new Function(){ + + public void f() { + $(".bar").animate("backgroundColor: 'yellow'", 1000) + .delay(200) + .animate("borderColor: '#ff0000'",1000) + .delay(200) + .animate(Properties.create().$$("color","rgb(255, 255, 255)"), 1000, Easing.SWING); + } + + }); + + $("#resetAnim2").click(new Function(){ + + public void f() { + $(".bar").css(CSS.BACKGROUND_COLOR.with(null), CSS.BORDER_COLOR.with(null), CSS.COLOR.with(null)); + } + + }); + } + +} diff --git a/samples/src/main/java/gwtquery/samples/public/ColorEffectsSample.html b/samples/src/main/java/gwtquery/samples/public/ColorEffectsSample.html new file mode 100644 index 00000000..701a22c1 --- /dev/null +++ b/samples/src/main/java/gwtquery/samples/public/ColorEffectsSample.html @@ -0,0 +1,51 @@ + + + +GQuery Effects Sample + + + + +

Animate css color properties

+

This example shows you how using gwtquery to perform animation on +color css properties (backgroundColor, color, corderColor...)

+
+ +
+
BANG !
+
+ + +
+
GwtQuery
+ +