diff options
| author | Julien Dramaix <julien.dramaix@gmail.com> | 2011-04-22 09:09:14 +0000 |
|---|---|---|
| committer | Julien Dramaix <julien.dramaix@gmail.com> | 2011-04-22 09:09:14 +0000 |
| commit | e5e2b652f0a3ad3ba3ee8da1a009bbad7c4f446e (patch) | |
| tree | 2d19b8fec115927675da71bfd381131110f934bc /samples/src/main/java | |
| parent | da3dbd826115090a9b05d19b7d77eb99d1520b6c (diff) | |
| download | gwtquery-e5e2b652f0a3ad3ba3ee8da1a009bbad7c4f446e.tar.gz gwtquery-e5e2b652f0a3ad3ba3ee8da1a009bbad7c4f446e.zip | |
color animation examples
Diffstat (limited to 'samples/src/main/java')
3 files changed, 105 insertions, 0 deletions
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 @@ +<module rename-to='ColorEffectsSample'> + <inherits name='com.google.gwt.query.Query' /> + <inherits name='com.google.gwt.user.theme.chrome.Chrome' /> + <entry-point + class="gwtquery.samples.client.effects.ColorEffectsSample"> + </entry-point> +</module> + 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 @@ +<!doctype html>
+<html>
+<head>
+<title>GQuery Effects Sample</title>
+<script language="javascript" src="ColorEffectsSample.nocache.js"></script>
+<style type="text/css">
+body {
+ font-family: Helvetica;
+}
+
+.reset {
+ float: left;
+}
+
+.foo {
+ margin-top: 100px;
+ margin-bottom: 100px; width : 100%;
+ color: white;
+ font-size: 60px;
+ text-align: center;
+ width: 100%;
+}
+
+.bar {
+ border: solid 10px black;
+ border-left-color: silver;
+ border-right-color: silver;
+ width : 200px;
+ height: 200px;
+ padding-top: 70px;
+ font-size: 30px;
+ text-align: center;
+ width: 200px;
+}
+</style>
+</head>
+<body>
+<h1>Animate css color properties</h1>
+<p>This example shows you how using gwtquery to perform animation on
+color css properties (backgroundColor, color, corderColor...)</p>
+<div>
+<button id="shoot">Shoot This page!</button>
+</div>
+<div class="foo">BANG !</div>
+<div>
+<button id="startAnim2">Start animation</button>
+<button id="resetAnim2">Reset animation</button>
+</div>
+<div class="bar">GwtQuery</div>
+</body>
+</html>
|