From: Julien Dramaix <julien.dramaix@gmail.com>
Date: Thu, 31 Mar 2011 21:22:49 +0000 (+0000)
Subject: - add unwrap() method
X-Git-Tag: release-1.3.2~443
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=16c3908b0071d4a1605b7d3f5dd7a4dd63e60732;p=gwtquery.git

- add unwrap() method
- correct bug in replaceWith method : order of replacing element was not kept
- add animations method : delay, queue, dequeue, clearQueue, animate, stop and slide*
---

diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java
index 80d1122f..f26e70e3 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java
@@ -17,6 +17,7 @@ package com.google.gwt.query.client;
 
 import static com.google.gwt.query.client.plugins.Effects.Effects;
 import static com.google.gwt.query.client.plugins.Events.Events;
+import static com.google.gwt.query.client.plugins.SimpleNamedQueue.SimpleNamedQueue;
 
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.core.client.JavaScriptObject;
@@ -44,7 +45,9 @@ import com.google.gwt.query.client.js.JsCache;
 import com.google.gwt.query.client.js.JsMap;
 import com.google.gwt.query.client.js.JsNodeArray;
 import com.google.gwt.query.client.js.JsUtils;
+import com.google.gwt.query.client.plugins.Effects;
 import com.google.gwt.query.client.plugins.Plugin;
+import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing;
 import com.google.gwt.query.client.plugins.events.EventsListener;
 import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.Event;
@@ -141,20 +144,6 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
         : $((Element) event.getCurrentEventTarget().cast());
   }
 
-  /**
-   * Wrap a GQuery around an existing node.
-   */
-  public static GQuery $(Node n) {
-    return n == null ? $() : new GQuery(JsNodeArray.create(n));
-  }
-
-  /**
-   * Wrap a GQuery around existing Elements.
-   */
-  public static GQuery $(NodeList<Element> elements) {
-    return new GQuery(elements);
-  }
-
   /**
    * Create a new GQuery given a list of nodes, elements or widgets
    */
@@ -172,6 +161,20 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     return new GQuery(elements);
   }
 
+  /**
+   * Wrap a GQuery around an existing node.
+   */
+  public static GQuery $(Node n) {
+    return n == null ? $() : new GQuery(JsNodeArray.create(n));
+  }
+
+  /**
+   * Wrap a GQuery around existing Elements.
+   */
+  public static GQuery $(NodeList<Element> elements) {
+    return new GQuery(elements);
+  }
+
   /**
    * This function accepts a string containing a CSS selector which is then used
    * to match a set of elements, or it accepts raw HTML creating a GQuery
@@ -460,12 +463,16 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
 		return $wnd;
   }-*/;
 
-  private NodeList<Element> elements = JavaScriptObject.createArray().cast();
-
   private String currentSelector;
 
+  private NodeList<Element> elements = JavaScriptObject.createArray().cast();
+
   private GQuery previousObject;
 
+  protected GQuery(GQuery gq) {
+    this(gq == null ? null : gq.get());
+  }
+
   private GQuery() {
   }
 
@@ -475,10 +482,6 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     }
   }
 
-  protected GQuery(GQuery gq) {
-    this(gq == null ? null : gq.get());
-  }
-
   private GQuery(JsNodeArray elements) {
     if (elements != null) {
       this.elements = elements;
@@ -556,6 +559,142 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     return add(previousObject);
   }
 
+  /**
+   * The animate() method allows you to create animation effects on any numeric
+   * CSS property. All animated properties should be numeric, non-numeric cannot
+   * be animated using basic functionality. (For example, width, height, or left
+   * can be animated but background-color cannot be.) Property values are
+   * treated as a number of pixels unless otherwise specified. The units em and
+   * % can be specified where applicable.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to the position top:500px and left:500px for 400ms.
+   *  //use a swing easing function for the transition
+   *  $("#foo").animate(Properties.create("{top:'500px',left:'500px'}"), 400, Easing.SWING);
+   * </pre>
+   * 
+   * In addition to numeric values, each property can take the strings 'show',
+   * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing
+   * animations that take into account the display type of the element. Animated
+   * properties can also be relative. If a value is supplied with a leading +=
+   * or -= sequence of characters, then the target value is computed by adding
+   * or subtracting the given number from the current value of the property.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to 500px to the left and 5OOpx down for 400ms.
+   *  //use a swing easing function for the transition
+   *  $("#foo").animate(Properties.create("{top:'+=500px',left:'+=500px'}"), 400, Easing.SWING);
+   * </pre>
+   * 
+   * @param p a {@link Properties} object containing css properties to animate.
+   * @param funcs an array of {@link Function} called once the animation is
+   *          complete
+   * @param duration the duration in milliseconds of the animation
+   * @param easing the easing function to use for the transition
+   */
+  public GQuery animate(Properties p, int duration,
+      Easing easing, Function... funcs){
+    return as(Effects).animate(p, duration, easing, funcs);
+  }
+
+  /**
+   * The animate() method allows you to create animation effects on any numeric
+   * CSS property. All animated properties should be numeric, non-numeric cannot
+   * be animated using basic functionality. (For example, width, height, or left
+   * can be animated but background-color cannot be.) Property values are
+   * treated as a number of pixels unless otherwise specified. The units em and
+   * % can be specified where applicable.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to left:500px for 500ms
+   *  $("#foo").animate("left:'500'");
+   * </pre>
+   * 
+   * In addition to numeric values, each property can take the strings 'show',
+   * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing
+   * animations that take into account the display type of the element. Animated
+   * properties can also be relative. If a value is supplied with a leading +=
+   * or -= sequence of characters, then the target value is computed by adding
+   * or subtracting the given number from the current value of the property.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to 500px to the left for 500ms and
+   *  // change the background color of the element at the end of the animation
+   *  $("#foo").animate("left:'+=500'", new Function(){
+   *                  
+   *                 public void f(Element e){
+   *                   $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);
+   *                 }
+   *                 
+   *              });
+   * </pre>
+   * 
+   * The duration of the animation is 500ms.
+   *    
+   * @param prop the property to animate : "cssName:'value'"
+   * @param funcs an array of {@link Function} called once the animation is
+   *          complete
+   * @param duration the duration in milliseconds of the animation
+   */
+  public GQuery animate(String prop, Function... funcs){
+    return as(Effects).animate(prop, funcs);
+  }
+
+  /**
+   * The animate() method allows you to create animation effects on any numeric
+   * CSS property. All animated properties should be numeric, non-numeric cannot
+   * be animated using basic functionality. (For example, width, height, or left
+   * can be animated but background-color cannot be.) Property values are
+   * treated as a number of pixels unless otherwise specified. The units em and
+   * % can be specified where applicable.
+   *
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to left:500px for 2s
+   *  $("#foo").animate("left:'500px'", 2000);
+   * </pre>
+   * 
+   * In addition to numeric values, each property can take the strings 'show',
+   * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing
+   * animations that take into account the display type of the element. Animated
+   * properties can also be relative. If a value is supplied with a leading +=
+   * or -= sequence of characters, then the target value is computed by adding
+   * or subtracting the given number from the current value of the property.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to 500px to the left for 1000ms and
+   *  // change the background color of the element at the end of the animation
+   *  $("#foo").animate("left:'+=500'", 1000, new Function(){
+   *                  
+   *                 public void f(Element e){
+   *                   $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);
+   *                 }
+   *                 
+   *              });
+   * </pre>
+   * 
+   * 
+   * @param prop the property to animate : "cssName:'value'"
+   * @param funcs an array of {@link Function} called once the animation is
+   *          complete
+   * @param duration the duration in milliseconds of the animation
+   */
+  public GQuery animate(String prop, int duration, Function... funcs) {
+    return as(Effects).animate(prop, duration, funcs);
+  }
+
   /**
    * Append content to the inside of every matched element. This operation is
    * similar to doing an appendChild to all the specified elements, adding them
@@ -766,6 +905,25 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     return find(filters);
   }
 
+  /**
+   * Remove from the Effects queue all {@link Function} that have not yet been
+   * run.
+   */
+  public GQuery clearQueue() {
+    return as(Effects).clearQueue();
+  }
+
+  /**
+   * Remove from the queue all {@link Function} that have not yet been run.
+   */
+  public GQuery clearQueue(String queueName) {
+    if (queueName == null || "fx".equalsIgnoreCase(queueName)) {
+      return as(Effects).clearQueue();
+    }
+
+    return as(SimpleNamedQueue).clearQueue(queueName);
+  }
+
   /**
    * Bind a set of functions to the click event of each matched element. Or
    * trigger the event if no functions are provided.
@@ -868,6 +1026,34 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     return this;
   }
 
+  /**
+   * Return a style property on the first matched element using type-safe
+   * enumerations.
+   * 
+   * Ex : $("#myId").css(CSS.BACKGROUND_COLOR);
+   */
+  public String css(HasCssValue property) {
+    return css(property, false);
+  }
+
+  /**
+   * Return a style property on the first matched element using type-safe
+   * enumerations.
+   * 
+   * The parameter force has a special meaning here: - When force is false,
+   * returns the value of the css property defined in the style attribute of the
+   * element. - Otherwise it returns the real computed value.
+   * 
+   * For instance if you define 'display=none' not in the element style but in
+   * the css stylesheet, it returns an empty string unless you pass the
+   * parameter force=true.
+   * 
+   * Ex : $("#myId").css(CSS.WIDTH, true);
+   */
+  public String css(HasCssValue property, boolean force) {
+    return css(property.getCssName(), force);
+  }
+
   /**
    * Set a key/value object as style properties to all matched elements. This
    * serves as the best way to set a large number of style properties on all
@@ -930,34 +1116,6 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     return css(cssProperty.with(value));
   }
 
-  /**
-   * Return a style property on the first matched element using type-safe
-   * enumerations.
-   * 
-   * Ex : $("#myId").css(CSS.BACKGROUND_COLOR);
-   */
-  public String css(HasCssValue property) {
-    return css(property, false);
-  }
-
-  /**
-   * Return a style property on the first matched element using type-safe
-   * enumerations.
-   * 
-   * The parameter force has a special meaning here: - When force is false,
-   * returns the value of the css property defined in the style attribute of the
-   * element. - Otherwise it returns the real computed value.
-   * 
-   * For instance if you define 'display=none' not in the element style but in
-   * the css stylesheet, it returns an empty string unless you pass the
-   * parameter force=true.
-   * 
-   * Ex : $("#myId").css(CSS.WIDTH, true);
-   */
-  public String css(HasCssValue property, boolean force) {
-    return css(property.getCssName(), force);
-  }
-
   /**
    * Set CSS a single style property on every matched element using type-safe
    * enumerations. This method allows you to set manually the value or set
@@ -972,14 +1130,14 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
   public GQuery css(TakesCssValue<?> cssProperty, String value) {
     return css(cssProperty.getCssName(), value);
   }
-
+  
   /**
    * Returns the numeric value of a css property.
    */
   public double cur(String prop) {
     return cur(prop, false);
   }
-
+  
   /**
    * Returns the numeric value of a css property.
    * 
@@ -990,7 +1148,7 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
   public double cur(String prop, boolean force) {
     return size() == 0 ? 0 : styleImpl.cur(get(0), prop, force);
   }
-
+  
   /**
    * Returns value at named data store for the element, as set by data(name,
    * value).
@@ -998,7 +1156,7 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
   public Object data(String name) {
     return data(elements.getItem(0), name, null);
   }
-
+  
   /**
    * Returns value at named data store for the element, as set by data(name,
    * value) with desired return type.
@@ -1009,7 +1167,7 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
   public <T> T data(String name, Class<T> clz) {
     return (T) data(elements.getItem(0), name, null);
   }
-
+  
   /**
    * Stores the value in the named spot with desired return type.
    */
@@ -1019,7 +1177,7 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     }
     return this;
   }
-
+  
   /**
    * Bind a set of functions to the dblclick event of each matched element. Or
    * trigger the event if no functions are provided.
@@ -1028,6 +1186,103 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     return bindOrFire(Event.ONDBLCLICK, null, f);
   }
 
+  /**
+   * Insert a delay (in ms) in the Effects queue.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   * $('#foo').slideUp(300).delay(800).fadeIn(400); 
+   * </pre>
+   * 
+   * When this statement is executed, the element slides up for 300 milliseconds
+   * and then pauses for 800 milliseconds before fading in for 400 milliseconds.
+   * 
+   * Please note that this methods affects only the Effects queue. So the
+   * following example is wrong:
+   * 
+   * <pre>
+   * $('#foo').css(CSS.COLOR.with(RGBColor.RED)).delay(800).css(CSS.COLOR.with(RGBColor.BLACK)); 
+   * </pre>
+   * 
+   * The code above will not insert a delay of 800 ms between the css() calls !
+   * For this kind of behavior, please check {@link #delay(int, String)}
+   */
+  public GQuery delay(int milliseconds) {
+    return as(Effects).delay(milliseconds);
+  }
+
+  /**
+   * Insert a delay (in ms) in the queue identified by the
+   * <code>queueName</code> parameter. if <code>queueName</code> is null or
+   * equats to 'fx', the delay will be inserted to the Effects queue.
+   * 
+   * Example :
+   * 
+   * <pre class="code">
+   * $('#foo').queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.RED)).done())
+   *          .delay(800, "colorQueue")
+   *          .queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.BLACK)).done()); 
+   * </pre>
+   * 
+   * When this statement is executed, the text color of the element changes to
+   * red and then wait for 800 milliseconds before changes the text color to
+   * black.
+   * 
+   */
+  public GQuery delay(int milliseconds, String queueName) {
+    if (queueName == null || "fx".equalsIgnoreCase(queueName)) {
+      return as(Effects).delay(milliseconds);
+    }
+
+    return as(SimpleNamedQueue).delay(milliseconds, queueName);
+  }
+  
+  /**
+   * Execute the next function on the Effects queue for the matched elements.
+   * This method is usefull to tell when a function you add in the Effects queue
+   * is ended and so the next function in the queue can start.
+   */
+  public GQuery dequeue(){
+    return as(Effects).dequeue();
+  }
+  
+  /**
+   * Execute the next function on the queue for the matched elements.
+   * This method is usefull to tell when a function you add in the Effects queue
+   * is ended and so the next function in the queue can start.
+   */
+  public GQuery dequeue(String queueName){
+    if (queueName == null || "fx".equalsIgnoreCase(queueName)){
+      return as(Effects).dequeue();
+    }
+    
+    return as(SimpleNamedQueue).dequeue(queueName);
+  }
+  
+  /**
+   * Detach all matched elements from the DOM. This method is the same than
+   * {@link #remove()} method except all data and event handlers are not remove
+   * from the element. This method is useful when removed elements are to be
+   * reinserted into the DOM at a later time.
+   */
+  public GQuery detach() {
+    return remove(null, false);
+  }
+  
+
+  
+  /**
+   * Detach from the DOM all matched elements filtered by the
+   * <code>filter</code>.. This method is the same than {@link #remove(String)}
+   * method except all data and event handlers are not remove from the element.
+   * This method is useful when removed elements are to be reinserted into the
+   * DOM at a later time.
+   */
+  public GQuery detach(String filter) {
+    return remove(filter, false);
+  }
+  
   /**
    * Run one or more Functions over each element of the GQuery. You have to
    * override one of these funcions: public void f(Element e) public String
@@ -1043,7 +1298,7 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     }
     return this;
   }
-
+  
   /**
    * Returns the working set of nodes as a Java array. <b>Do NOT</b> attempt to
    * modify this array, e.g. assign to its elements, or call Arrays.sort()
@@ -1074,7 +1329,7 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     }
     return this;
   }
-
+  
   /**
    * Revert the most recent 'destructive' operation, changing the set of matched
    * elements to its previous state (right before the destructive operation).
@@ -1983,66 +2238,78 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
   }
 
   /**
-   * Removes all matched elements from the DOM.
-   */
-  public GQuery remove() {
-    return remove(null, true);
-  }
-
-  /**
-   * Removes from the DOM all matched elements filtered by the
-   * <code>filter</code>.
+   * Put a {@link Function} at the end of the Effects queue.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   * $("#foo").animate("left:'+=500'", 400)
+   *      .queue(new Function(){
+   *          public void f(Element e){
+   *             $(e).css(CSS.BACKGROUNG_COLOR.with(RGBColor.RED));
+   *             $(e).dequeue();     
+   *          }
+   *        }).animate("left:'-=500'", 400)
+   * </pre>
+   * 
+   * When this statement is executed, the element move to 500 px to left for 400
+   * ms, then its background color is changed to red and then move to 500px to
+   * right for 400ms.
+   * 
+   * Please note that {@link #dequeue()} function is needed at the end of your
+   * function to start the next function in the queue. {@see #dequeue()}
    */
-  public GQuery remove(String filter) {
-    return remove(filter, true);
+  public GQuery queue(Function f) {
+    return as(Effects).queue(f);
   }
 
   /**
-   * Detach all matched elements from the DOM. This method is the same than
-   * {@link #remove()} method except all data and event handlers are not remove
-   * from the element. This method is useful when removed elements are to be
-   * reinserted into the DOM at a later time.
+   * Put a {@link Function} at the end of a queue.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   * $("#foo").queue("myQueue", new Function(){
+   *          public void f(Element e){
+   *             $(e).css(CSS.BACKGROUNG_COLOR.with(RGBColor.RED));
+   *             $(e).dequeue();     
+   *          }
+   *        }).delay(500, "myQueue")
+   *        .queue("myQueue", new Function(){
+   *          public void f(Element e){
+   *             $(e).css(CSS.COLOR.with(RGBColor.YELLOW));
+   *             $(e).dequeue();     
+   *          }
+   *         });
+   * </pre>
+   * 
+   * When this statement is executed, the background color of the element is set
+   * to red, then wait 500ms before to set the text color of the element to
+   * yellow. right for 400ms.
+   * 
+   * Please note that {@link #dequeue()} function is needed at the end of your
+   * function to start the next function in the queue. {@see #dequeue()}
    */
-  public GQuery detach() {
-    return remove(null, false);
+  public GQuery queue(String queueName, Function f){
+    if (queueName == null || "fx".equalsIgnoreCase(queueName)){
+      return as(Effects).queue(f);
+    }
+    return as(SimpleNamedQueue).queue(queueName,f);
   }
 
   /**
-   * Detach from the DOM all matched elements filtered by the
-   * <code>filter</code>.. This method is the same than {@link #remove(String)}
-   * method except all data and event handlers are not remove from the element.
-   * This method is useful when removed elements are to be reinserted into the
-   * DOM at a later time.
+   * Removes all matched elements from the DOM.
    */
-  public GQuery detach(String filter) {
-    return remove(filter, false);
+  public GQuery remove() {
+    return remove(null, true);
   }
 
   /**
-   * Removes all matched elements from the DOM and cleans their data and bound
-   * events if the value of <code>clean</code> parameter is set to true. The
-   * <code> filter</code> parameter allows to filter the matched set to remove.
+   * Removes from the DOM all matched elements filtered by the
+   * <code>filter</code>.
    */
-  protected GQuery remove(String filter, boolean clean) {
-     
-    for (Element e : elements()) {
-      if (filter == null || $(e).filter(filter).length() == 1) {
-        if (clean) {
-          //clean data linked to the children
-          cleanGQData($("*", e).elements());
-          //clean data linked to the element itself
-          cleanGQData(e);
-        }
-        Widget w = getAssociatedWidget(e);
-        if (w != null) {
-          w.removeFromParent();
-        } else {
-          e.removeFromParent();
-        }
-      }
-    }
-
-    return this;
+  public GQuery remove(String filter) {
+    return remove(filter, true);
   }
 
   /**
@@ -2142,7 +2409,18 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
    *         from the DOM and not the new element that has replaced it.
    */
   public GQuery replaceWith(GQuery target) {
-    return after(target).remove();
+    for (Element el : elements()){
+      Element nextSibling = el.getNextSiblingElement();
+      
+      if (nextSibling != null){
+        $(nextSibling).before(target);
+      }else{
+        Element parent = el.getParentElement();
+        $(parent).append(target);
+      }
+      $(el).remove();
+    }
+    return this;
 
   }
 
@@ -2153,7 +2431,19 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
    *         from the DOM and not the new element that has replaced it.
    */
   public GQuery replaceWith(String html) {
-    return after(html).remove();
+    for (Element el : elements()){
+      Element nextSibling = el.getNextSiblingElement();
+      
+      if (nextSibling != null){
+        $(nextSibling).before(html);
+      }else{
+        Element parent = el.getParentElement();
+        $(parent).append(html);
+      }
+      $(el).remove();
+    }
+    return this;
+
   }
 
   /**
@@ -2365,10 +2655,71 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     return new GQuery(slice);
   }
 
+  /**
+   * Reveal all matched elements by adjusting their height and firing an
+   * optional callback after completion.
+   */
+  public Effects slideDown(Function... f) {
+    return as(Effects).slideDown(f);
+  }
+
+  /**
+   * Reveal all matched elements by adjusting their height and firing an
+   * optional callback after completion.
+   */
+  public Effects slideDown(int millisecs, Function... f) {
+    return as(Effects).slideDown(millisecs, f);
+  }
+
+  /**
+   * Toggle the visibility of all matched elements by adjusting their height and
+   * firing an optional callback after completion. Only the height is adjusted
+   * for this animation, causing all matched elements to be hidden or shown in a
+   * "sliding" manner
+   */
+  public Effects slideToggle(int millisecs, Function... f) {
+     return as(Effects).slideToggle(millisecs, f);
+  }
+  
+  
+  /**
+   * Hide all matched elements by adjusting their height and firing an optional
+   * callback after completion.
+   */
+  public Effects slideUp(Function... f) {
+    return as(Effects).slideUp(f);
+  }
+
+  /**
+   * Hide all matched elements by adjusting their height and firing an optional
+   * callback after completion.
+   */
+  public Effects slideUp(int millisecs, Function... f) {
+    return as(Effects).slideUp(millisecs, f);
+  }
+  
+  /**
+   * Stop the animation currently running.
+   */
+  public GQuery stop(){
+    return stop(false);
+  }
+
+  /**
+   * Stop the animation currently running.
+   */
+  //TODO: implements jumpToEnd
+  public GQuery stop(boolean clearQueue){
+    return as(Effects).stop(clearQueue);
+  }
+
   public GQuery submit() {
     return as(Events).trigger(EventsListener.ONSUBMIT);
   }
 
+
+  
+
   /**
    * Return the text contained in the first matched element.
    */
@@ -2511,6 +2862,24 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     return JsUtils.unique(result.<JsArray<Element>> cast()).cast();
   }
 
+  /**
+   * This method removes the element's parent. The matched elements replaces
+   * their parents within the DOM structure. It is the inverse of
+   * {@link GQuery#wrap(GQuery)} method
+   * 
+   * @return
+   */
+  public GQuery unwrap() {
+
+    for (Element parent : parent().elements()){
+      if (!"body".equalsIgnoreCase(parent.getTagName())){
+        GQuery $parent = $(parent);
+        $parent.replaceWith($parent.children());
+      }
+    }
+    return this;
+  }
+  
   /**
    * Gets the content of the value attribute of the first matched element,
    * returns only the first value even if it is a multivalued element. To get an
@@ -2874,6 +3243,33 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     return g;
   }
 
+  /**
+   * Removes all matched elements from the DOM and cleans their data and bound
+   * events if the value of <code>clean</code> parameter is set to true. The
+   * <code> filter</code> parameter allows to filter the matched set to remove.
+   */
+  protected GQuery remove(String filter, boolean clean) {
+     
+    for (Element e : elements()) {
+      if (filter == null || $(e).filter(filter).length() == 1) {
+        if (clean) {
+          //clean data linked to the children
+          cleanGQData($("*", e).elements());
+          //clean data linked to the element itself
+          cleanGQData(e);
+        }
+        Widget w = getAssociatedWidget(e);
+        if (w != null) {
+          w.removeFromParent();
+        } else {
+          e.removeFromParent();
+        }
+      }
+    }
+
+    return this;
+  }
+
   private void allNextSiblingElements(Element firstChildElement,
       JsNodeArray result, Element elem) {
     while (firstChildElement != null) {
@@ -2904,6 +3300,13 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     }
   }
 
+  private void cleanGQData(Element... elements){
+    for (Element el : elements){
+      EventsListener.clean(el);
+      removeData(el, null);
+    }
+  }
+
   private GQuery domManip(GQuery g, int func, Element... elms) {
     JsNodeArray newNodes = JsNodeArray.create();
     if (elms.length == 0) {
@@ -2976,7 +3379,7 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
     }
     return res;
   }
-
+  
   private void removeData(Element item, String name) {
     if (dataCache == null) {
       windowData = JavaScriptObject.createObject().cast();
@@ -2995,11 +3398,4 @@ public class GQuery implements Lazy<GQuery, LazyGQuery> {
       dataCache.delete(id);
     }
   }
-  
-  private void cleanGQData(Element... elements){
-    for (Element el : elements){
-      EventsListener.clean(el);
-      removeData(el, null);
-    }
-  }
 }
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java
index ef43e69d..b9417e28 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java
@@ -16,6 +16,7 @@
 package com.google.gwt.query.client;
 import static com.google.gwt.query.client.plugins.Effects.Effects;
 import static com.google.gwt.query.client.plugins.Events.Events;
+import static com.google.gwt.query.client.plugins.SimpleNamedQueue.SimpleNamedQueue;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.core.client.JavaScriptObject;
 import com.google.gwt.core.client.JsArray;
@@ -42,7 +43,9 @@ import com.google.gwt.query.client.js.JsCache;
 import com.google.gwt.query.client.js.JsMap;
 import com.google.gwt.query.client.js.JsNodeArray;
 import com.google.gwt.query.client.js.JsUtils;
+import com.google.gwt.query.client.plugins.Effects;
 import com.google.gwt.query.client.plugins.Plugin;
+import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing;
 import com.google.gwt.query.client.plugins.events.EventsListener;
 import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.Event;
@@ -102,6 +105,135 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    */
   LazyGQuery<T> andSelf();
 
+  /**
+   * The animate() method allows you to create animation effects on any numeric
+   * CSS property. All animated properties should be numeric, non-numeric cannot
+   * be animated using basic functionality. (For example, width, height, or left
+   * can be animated but background-color cannot be.) Property values are
+   * treated as a number of pixels unless otherwise specified. The units em and
+   * % can be specified where applicable.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to the position top:500px and left:500px for 400ms.
+   *  //use a swing easing function for the transition
+   *  $("#foo").animate(Properties.create("{top:'500px',left:'500px'}"), 400, Easing.SWING);
+   * </pre>
+   * 
+   * In addition to numeric values, each property can take the strings 'show',
+   * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing
+   * animations that take into account the display type of the element. Animated
+   * properties can also be relative. If a value is supplied with a leading +=
+   * or -= sequence of characters, then the target value is computed by adding
+   * or subtracting the given number from the current value of the property.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to 500px to the left and 5OOpx down for 400ms.
+   *  //use a swing easing function for the transition
+   *  $("#foo").animate(Properties.create("{top:'+=500px',left:'+=500px'}"), 400, Easing.SWING);
+   * </pre>
+   * 
+   * @param p a {@link Properties} object containing css properties to animate.
+   * @param funcs an array of {@link Function} called once the animation is
+   *          complete
+   * @param duration the duration in milliseconds of the animation
+   * @param easing the easing function to use for the transition
+   */
+  LazyGQuery<T> animate(Properties p, int duration, Easing easing, Function... funcs);
+
+  /**
+   * The animate() method allows you to create animation effects on any numeric
+   * CSS property. All animated properties should be numeric, non-numeric cannot
+   * be animated using basic functionality. (For example, width, height, or left
+   * can be animated but background-color cannot be.) Property values are
+   * treated as a number of pixels unless otherwise specified. The units em and
+   * % can be specified where applicable.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to left:500px for 500ms
+   *  $("#foo").animate("left:'500'");
+   * </pre>
+   * 
+   * In addition to numeric values, each property can take the strings 'show',
+   * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing
+   * animations that take into account the display type of the element. Animated
+   * properties can also be relative. If a value is supplied with a leading +=
+   * or -= sequence of characters, then the target value is computed by adding
+   * or subtracting the given number from the current value of the property.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to 500px to the left for 500ms and
+   *  // change the background color of the element at the end of the animation
+   *  $("#foo").animate("left:'+=500'", new Function(){
+   *                  
+   *                 public void f(Element e){
+   *                   $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);
+   *                 }
+   *                 
+   *              });
+   * </pre>
+   * 
+   * The duration of the animation is 500ms.
+   *    
+   * @param prop the property to animate : "cssName:'value'"
+   * @param funcs an array of {@link Function} called once the animation is
+   *          complete
+   * @param duration the duration in milliseconds of the animation
+   */
+  LazyGQuery<T> animate(String prop, Function... funcs);
+
+  /**
+   * The animate() method allows you to create animation effects on any numeric
+   * CSS property. All animated properties should be numeric, non-numeric cannot
+   * be animated using basic functionality. (For example, width, height, or left
+   * can be animated but background-color cannot be.) Property values are
+   * treated as a number of pixels unless otherwise specified. The units em and
+   * % can be specified where applicable.
+   *
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to left:500px for 2s
+   *  $("#foo").animate("left:'500px'", 2000);
+   * </pre>
+   * 
+   * In addition to numeric values, each property can take the strings 'show',
+   * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing
+   * animations that take into account the display type of the element. Animated
+   * properties can also be relative. If a value is supplied with a leading +=
+   * or -= sequence of characters, then the target value is computed by adding
+   * or subtracting the given number from the current value of the property.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   *  //move the element from its original position to 500px to the left for 1000ms and
+   *  // change the background color of the element at the end of the animation
+   *  $("#foo").animate("left:'+=500'", 1000, new Function(){
+   *                  
+   *                 public void f(Element e){
+   *                   $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);
+   *                 }
+   *                 
+   *              });
+   * </pre>
+   * 
+   * 
+   * @param prop the property to animate : "cssName:'value'"
+   * @param funcs an array of {@link Function} called once the animation is
+   *          complete
+   * @param duration the duration in milliseconds of the animation
+   */
+  LazyGQuery<T> animate(String prop, int duration, Function... funcs);
+
   /**
    * Append content to the inside of every matched element. This operation is
    * similar to doing an appendChild to all the specified elements, adding them
@@ -244,6 +376,17 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    */
   LazyGQuery<T> children(String... filters);
 
+  /**
+   * Remove from the Effects queue all {@link Function} that have not yet been
+   * run.
+   */
+  LazyGQuery<T> clearQueue();
+
+  /**
+   * Remove from the queue all {@link Function} that have not yet been run.
+   */
+  LazyGQuery<T> clearQueue(String queueName);
+
   /**
    * Bind a set of functions to the click event of each matched element. Or
    * trigger the event if no functions are provided.
@@ -290,6 +433,30 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    */
   LazyGQuery<T> css(CssSetter... cssSetter);
 
+  /**
+   * Return a style property on the first matched element using type-safe
+   * enumerations.
+   * 
+   * Ex : $("#myId").css(CSS.BACKGROUND_COLOR);
+   */
+  String css(HasCssValue property);
+
+  /**
+   * Return a style property on the first matched element using type-safe
+   * enumerations.
+   * 
+   * The parameter force has a special meaning here: - When force is false,
+   * returns the value of the css property defined in the style attribute of the
+   * element. - Otherwise it returns the real computed value.
+   * 
+   * For instance if you define 'display=none' not in the element style but in
+   * the css stylesheet, it returns an empty string unless you pass the
+   * parameter force=true.
+   * 
+   * Ex : $("#myId").css(CSS.WIDTH, true);
+   */
+  String css(HasCssValue property, boolean force);
+
   /**
    * Set a key/value object as style properties to all matched elements. This
    * serves as the best way to set a large number of style properties on all
@@ -327,30 +494,6 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    */
   LazyGQuery<T> css(String prop, String val);
 
-  /**
-   * Return a style property on the first matched element using type-safe
-   * enumerations.
-   * 
-   * Ex : $("#myId").css(CSS.BACKGROUND_COLOR);
-   */
-  String css(HasCssValue property);
-
-  /**
-   * Return a style property on the first matched element using type-safe
-   * enumerations.
-   * 
-   * The parameter force has a special meaning here: - When force is false,
-   * returns the value of the css property defined in the style attribute of the
-   * element. - Otherwise it returns the real computed value.
-   * 
-   * For instance if you define 'display=none' not in the element style but in
-   * the css stylesheet, it returns an empty string unless you pass the
-   * parameter force=true.
-   * 
-   * Ex : $("#myId").css(CSS.WIDTH, true);
-   */
-  String css(HasCssValue property, boolean force);
-
   /**
    * Set CSS a single style property on every matched element using type-safe
    * enumerations. This method allows you to set manually the value or set
@@ -403,6 +546,81 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    */
   LazyGQuery<T> dblclick(Function... f);
 
+  /**
+   * Insert a delay (in ms) in the Effects queue.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   * $('#foo').slideUp(300).delay(800).fadeIn(400); 
+   * </pre>
+   * 
+   * When this statement is executed, the element slides up for 300 milliseconds
+   * and then pauses for 800 milliseconds before fading in for 400 milliseconds.
+   * 
+   * Please note that this methods affects only the Effects queue. So the
+   * following example is wrong:
+   * 
+   * <pre>
+   * $('#foo').css(CSS.COLOR.with(RGBColor.RED)).delay(800).css(CSS.COLOR.with(RGBColor.BLACK)); 
+   * </pre>
+   * 
+   * The code above will not insert a delay of 800 ms between the css() calls !
+   * For this kind of behavior, please check {@link #delay(int, String)}
+   */
+  LazyGQuery<T> delay(int milliseconds);
+
+  /**
+   * Insert a delay (in ms) in the queue identified by the
+   * <code>queueName</code> parameter. if <code>queueName</code> is null or
+   * equats to 'fx', the delay will be inserted to the Effects queue.
+   * 
+   * Example :
+   * 
+   * <pre class="code">
+   * $('#foo').queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.RED)).done())
+   *          .delay(800, "colorQueue")
+   *          .queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.BLACK)).done()); 
+   * </pre>
+   * 
+   * When this statement is executed, the text color of the element changes to
+   * red and then wait for 800 milliseconds before changes the text color to
+   * black.
+   * 
+   */
+  LazyGQuery<T> delay(int milliseconds, String queueName);
+
+  /**
+   * Execute the next function on the Effects queue for the matched elements.
+   * This method is usefull to tell when a function you add in the Effects queue
+   * is ended and so the next function in the queue can start.
+   */
+  LazyGQuery<T> dequeue();
+
+  /**
+   * Execute the next function on the queue for the matched elements.
+   * This method is usefull to tell when a function you add in the Effects queue
+   * is ended and so the next function in the queue can start.
+   */
+  LazyGQuery<T> dequeue(String queueName);
+
+  /**
+   * Detach all matched elements from the DOM. This method is the same than
+   * {@link #remove()} method except all data and event handlers are not remove
+   * from the element. This method is useful when removed elements are to be
+   * reinserted into the DOM at a later time.
+   */
+  LazyGQuery<T> detach();
+
+  /**
+   * Detach from the DOM all matched elements filtered by the
+   * <code>filter</code>.. This method is the same than {@link #remove(String)}
+   * method except all data and event handlers are not remove from the element.
+   * This method is useful when removed elements are to be reinserted into the
+   * DOM at a later time.
+   */
+  LazyGQuery<T> detach(String filter);
+
   /**
    * Run one or more Functions over each element of the GQuery. You have to
    * override one of these funcions: public void f(Element e) public String
@@ -962,32 +1180,68 @@ public interface LazyGQuery<T> extends LazyBase<T>{
   LazyGQuery<T> prevAll();
 
   /**
-   * Removes all matched elements from the DOM.
+   * Put a {@link Function} at the end of the Effects queue.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   * $("#foo").animate("left:'+=500'", 400)
+   *      .queue(new Function(){
+   *          public void f(Element e){
+   *             $(e).css(CSS.BACKGROUNG_COLOR.with(RGBColor.RED));
+   *             $(e).dequeue();     
+   *          }
+   *        }).animate("left:'-=500'", 400)
+   * </pre>
+   * 
+   * When this statement is executed, the element move to 500 px to left for 400
+   * ms, then its background color is changed to red and then move to 500px to
+   * right for 400ms.
+   * 
+   * Please note that {@link #dequeue()} function is needed at the end of your
+   * function to start the next function in the queue. {@see #dequeue()}
    */
-  LazyGQuery<T> remove();
+  LazyGQuery<T> queue(Function f);
 
   /**
-   * Removes from the DOM all matched elements filtered by the
-   * <code>filter</code>.
+   * Put a {@link Function} at the end of a queue.
+   * 
+   * Example:
+   * 
+   * <pre class="code">
+   * $("#foo").queue("myQueue", new Function(){
+   *          public void f(Element e){
+   *             $(e).css(CSS.BACKGROUNG_COLOR.with(RGBColor.RED));
+   *             $(e).dequeue();     
+   *          }
+   *        }).delay(500, "myQueue")
+   *        .queue("myQueue", new Function(){
+   *          public void f(Element e){
+   *             $(e).css(CSS.COLOR.with(RGBColor.YELLOW));
+   *             $(e).dequeue();     
+   *          }
+   *         });
+   * </pre>
+   * 
+   * When this statement is executed, the background color of the element is set
+   * to red, then wait 500ms before to set the text color of the element to
+   * yellow. right for 400ms.
+   * 
+   * Please note that {@link #dequeue()} function is needed at the end of your
+   * function to start the next function in the queue. {@see #dequeue()}
    */
-  LazyGQuery<T> remove(String filter);
+  LazyGQuery<T> queue(String queueName, Function f);
 
   /**
-   * Detach all matched elements from the DOM. This method is the same than
-   * {@link #remove()} method except all data and event handlers are not remove
-   * from the element. This method is useful when removed elements are to be
-   * reinserted into the DOM at a later time.
+   * Removes all matched elements from the DOM.
    */
-  LazyGQuery<T> detach();
+  LazyGQuery<T> remove();
 
   /**
-   * Detach from the DOM all matched elements filtered by the
-   * <code>filter</code>.. This method is the same than {@link #remove(String)}
-   * method except all data and event handlers are not remove from the element.
-   * This method is useful when removed elements are to be reinserted into the
-   * DOM at a later time.
+   * Removes from the DOM all matched elements filtered by the
+   * <code>filter</code>.
    */
-  LazyGQuery<T> detach(String filter);
+  LazyGQuery<T> remove(String filter);
 
   /**
    * Remove the named attribute from every element in the matched set.
@@ -1162,6 +1416,48 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    */
   LazyGQuery<T> slice(int start, int end);
 
+  /**
+   * Reveal all matched elements by adjusting their height and firing an
+   * optional callback after completion.
+   */
+  Effects slideDown(Function... f);
+
+  /**
+   * Reveal all matched elements by adjusting their height and firing an
+   * optional callback after completion.
+   */
+  Effects slideDown(int millisecs, Function... f);
+
+  /**
+   * Toggle the visibility of all matched elements by adjusting their height and
+   * firing an optional callback after completion. Only the height is adjusted
+   * for this animation, causing all matched elements to be hidden or shown in a
+   * "sliding" manner
+   */
+  Effects slideToggle(int millisecs, Function... f);
+
+  /**
+   * Hide all matched elements by adjusting their height and firing an optional
+   * callback after completion.
+   */
+  Effects slideUp(Function... f);
+
+  /**
+   * Hide all matched elements by adjusting their height and firing an optional
+   * callback after completion.
+   */
+  Effects slideUp(int millisecs, Function... f);
+
+  /**
+   * Stop the animation currently running.
+   */
+  LazyGQuery<T> stop();
+
+  /**
+   * Stop the animation currently running.
+   */
+  LazyGQuery<T> stop(boolean clearQueue);
+
   LazyGQuery<T> submit();
 
   /**
@@ -1236,6 +1532,15 @@ public interface LazyGQuery<T> extends LazyBase<T>{
    */
   JsNodeArray unique(JsNodeArray result);
 
+  /**
+   * This method removes the element's parent. The matched elements replaces
+   * their parents within the DOM structure. It is the inverse of
+   * {@link GQuery#wrap(GQuery)} method
+   * 
+   * @return
+   */
+  LazyGQuery<T> unwrap();
+
   /**
    * Gets the content of the value attribute of the first matched element,
    * returns only the first value even if it is a multivalued element. To get an
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/QueuePlugin.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/QueuePlugin.java
index b56fbb70..d78d5e99 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/QueuePlugin.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/QueuePlugin.java
@@ -18,6 +18,7 @@ package com.google.gwt.query.client.plugins;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.query.client.Function;
 import com.google.gwt.query.client.GQuery;
+import com.google.gwt.user.client.Timer;
 
 import java.util.LinkedList;
 import java.util.Queue;
@@ -26,12 +27,56 @@ import java.util.Queue;
  * Class used in plugins which need a queue system.
  */
 public abstract class QueuePlugin<T extends QueuePlugin<?>> extends GQuery {
-  
+
+  protected class DelayFunction extends Function {
+
+    private class SimpleTimer extends Timer {
+      @Override
+      public void run() {
+        dequeue();
+      }
+
+    }
+
+    private int delay;
+
+    public DelayFunction(int delayInMilliseconds) {
+      this.delay = delayInMilliseconds;
+    }
+
+    @Override
+    public void f() {
+      new SimpleTimer().schedule(delay);
+
+    }
+  }
+
   private static final String QUEUE_DATA_PREFIX = "GQueryQueue_";
 
   protected QueuePlugin(GQuery gq) {
     super(gq);
   }
+  
+  /**
+   * 
+   */
+  @SuppressWarnings("unchecked")
+  public T clearQueue() {
+    for (Element e : elements()) {
+      queue(e, null).clear();
+    }
+    return (T) this;
+  }
+  
+  
+  /**
+   * Add a delay in the queue
+   */
+  @SuppressWarnings("unchecked")
+  public T delay(int milliseconds) {
+    queue(new DelayFunction(milliseconds));
+    return (T) this;
+  }
 
   /**
    * Removes a queued function from the front of the queue and executes it.
@@ -41,7 +86,7 @@ public abstract class QueuePlugin<T extends QueuePlugin<?>> extends GQuery {
     for (Element e : elements()) {
       dequeueCurrentAndRunNext(e);
     }
-    return (T)this;
+    return (T) this;
   }
 
   /**
@@ -53,7 +98,7 @@ public abstract class QueuePlugin<T extends QueuePlugin<?>> extends GQuery {
     for (Element e : elements()) {
       queue(e, func);
     }
-    return (T)this;
+    return (T) this;
   }
 
   /**
@@ -64,33 +109,32 @@ public abstract class QueuePlugin<T extends QueuePlugin<?>> extends GQuery {
     for (Element e : elements()) {
       replacequeue(e, queue);
     }
-    return (T)this;
+    return (T) this;
   }
-  
+
   /**
-   * Stop the function which is currently in execution, remove it
-   * from the queue and start the next one.  
+   * Stop the function which is currently in execution, remove it from the queue
+   * and start the next one.
    */
   public T stop() {
     return stop(false);
   }
-  
+
   /**
-   * Stop the function which is currently in execution and depending
-   * on the value of the parameter:
-   * - remove it from the queue and start the next one.
-   * - or remove all functions in the queue.  
+   * Stop the function which is currently in execution and depending on the
+   * value of the parameter: - remove it from the queue and start the next one.
+   * - or remove all functions in the queue.
    */
   @SuppressWarnings("unchecked")
   public T stop(boolean clearQueue) {
     for (Element e : elements()) {
       stop(e, clearQueue);
     }
-    return (T)this;
+    return (T) this;
   }
 
   protected String getQueueType() {
-    return QUEUE_DATA_PREFIX + this.getClass().getName(); 
+    return QUEUE_DATA_PREFIX + this.getClass().getName();
   }
 
   private void dequeueCurrentAndRunNext(Element elem) {
@@ -107,7 +151,7 @@ public abstract class QueuePlugin<T extends QueuePlugin<?>> extends GQuery {
       }
     }
   }
-  
+
   @SuppressWarnings("unchecked")
   private <S> Queue<S> queue(Element elem, S func) {
     if (elem != null) {
@@ -133,7 +177,7 @@ public abstract class QueuePlugin<T extends QueuePlugin<?>> extends GQuery {
       data(elem, getQueueType(), queue);
     }
   }
-  
+
   private void stop(Element elem, boolean clear) {
     Queue<?> q = queue(elem, null);
     if (q != null) {
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/SimpleNamedQueue.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/SimpleNamedQueue.java
new file mode 100644
index 00000000..c7d56a9f
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/SimpleNamedQueue.java
@@ -0,0 +1,52 @@
+package com.google.gwt.query.client.plugins;
+
+import com.google.gwt.query.client.Function;
+import com.google.gwt.query.client.GQuery;
+
+public class SimpleNamedQueue extends QueuePlugin<SimpleNamedQueue>{
+
+  public static final Class<SimpleNamedQueue> SimpleNamedQueue = SimpleNamedQueue.class;
+  protected SimpleNamedQueue(GQuery gq) {
+    super(gq);
+  }
+  
+  static {
+    GQuery.registerPlugin(SimpleNamedQueue.class, new Plugin<SimpleNamedQueue>() {
+      public SimpleNamedQueue init(GQuery gq) {
+        return new SimpleNamedQueue(gq);
+      }
+    });
+  }
+  
+  private String queueName;
+  
+  @Override
+  public SimpleNamedQueue delay(int milliseconds, String queueName) {
+    this.queueName = queueName;
+    return delay(milliseconds);
+  }
+  
+  @Override
+  public SimpleNamedQueue queue(String queueName, Function func) {
+    this.queueName = queueName;
+    return queue(func);
+  }
+  
+  @Override
+  public GQuery dequeue(String queueName) {
+    this.queueName = queueName;
+    return dequeue();
+  }
+  
+  @Override
+  public GQuery clearQueue(String queueName) {
+    this.queueName = queueName;
+    return clearQueue();
+  }
+  
+  @Override
+  protected String getQueueType() {
+    return super.getQueueType() + (queueName != null ? queueName : "");
+  }
+
+}