mirrors
/
gwtquery
mirror of https://github.com/ArcBees/gwtquery.git
Watch 1
Star 0
Fork 0
Code Issues 0 Releases 4 Wiki Activity
Browse Source

add animation simple (queue, delay ...)

tags/release-1.3.2
Julien Dramaix 13 years ago
parent
16c3908b00
commit
3a80691578
3 changed files with 138 additions and 0 deletions
Split View Show Diff Stats
  1. 8
    0
      samples/src/main/java/gwtquery/samples/AnimationsSample.gwt.xml
  2. 99
    0
      samples/src/main/java/gwtquery/samples/client/AnimationsSample.java
  3. 31
    0
      samples/src/main/java/gwtquery/samples/public/AnimationsSample.html

+ 8
- 0
samples/src/main/java/gwtquery/samples/AnimationsSample.gwt.xml View File

@@ -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>


+ 99
- 0
samples/src/main/java/gwtquery/samples/client/AnimationsSample.java View File

@@ -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();
}
});
}
}

+ 31
- 0
samples/src/main/java/gwtquery/samples/public/AnimationsSample.html View File

@@ -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>

Write Preview
Loading…
Cancel
Save