--- /dev/null
+<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>
+
--- /dev/null
+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));
+ }
+
+ });
+ }
+
+}
--- /dev/null
+<!doctype html>\r
+<html>\r
+<head>\r
+<title>GQuery Effects Sample</title>\r
+<script language="javascript" src="ColorEffectsSample.nocache.js"></script>\r
+<style type="text/css">\r
+body {\r
+ font-family: Helvetica;\r
+}\r
+\r
+.reset {\r
+ float: left;\r
+}\r
+\r
+.foo {\r
+ margin-top: 100px;\r
+ margin-bottom: 100px; width : 100%;\r
+ color: white;\r
+ font-size: 60px;\r
+ text-align: center;\r
+ width: 100%;\r
+}\r
+\r
+.bar {\r
+ border: solid 10px black; \r
+ border-left-color: silver;\r
+ border-right-color: silver;\r
+ width : 200px;\r
+ height: 200px;\r
+ padding-top: 70px;\r
+ font-size: 30px;\r
+ text-align: center;\r
+ width: 200px;\r
+}\r
+</style>\r
+</head>\r
+<body>\r
+<h1>Animate css color properties</h1>\r
+<p>This example shows you how using gwtquery to perform animation on\r
+color css properties (backgroundColor, color, corderColor...)</p>\r
+<div>\r
+<button id="shoot">Shoot This page!</button>\r
+</div>\r
+<div class="foo">BANG !</div>\r
+<div>\r
+<button id="startAnim2">Start animation</button>\r
+<button id="resetAnim2">Reset animation</button>\r
+</div>\r
+<div class="bar">GwtQuery</div>\r
+</body>\r
+</html>\r
projects / gwtquery.git / commitdiff