GwtQuery - fadeIn one after another

Question

I want to add fade-in animation for couple of widgets one after another. I reviewed the doc, but it only does first fade-in.

$(myWidget1).fadeIn(new Function(){
      public boolean f(Event e){
            //tried to add the second fade-in for myWidget2, but no result 
            return true;
      }
});

How do I achieve fade-in one after another in this way or, is there another way to do it?

Thanks!

Carl · Answer 1 · 2013-01-03T07:48:20.853

1

Try this, using jQuery:

    $(document).ready(function(){
        var widgets = $('.widget');
        var fader = function(widget_n){
            if (widget_n < widgets.length) {
                $(widgets.get(widget_n)).fadeIn('slow', function(){
                    fader(widget_n +1);
                });    
            }
        };

        if (widgets.length > 0) {
            fader(0);
        }
    });

edited Jan 03 '13 at 07:48

answered Jan 03 '13 at 05:42

Carl

446
2
7

how do I do this with GWT? – sura2k Jan 03 '13 at 06:11
does GWT provide an animation method with a callback once the animation has completed? Could you also load the jQuery library and use that in addition? – Carl Jan 03 '13 at 07:49
bitten by the 5 minute edit rule. trying again: Apparently, there is a gwtquery library you might want to look into: [link]http://code.google.com/p/gwtquery/wiki/GettingStarted#The_animate%28%29_method Notice that the animate() function provides the same kind of callback function that jQuery's fadeIn() has. – Carl Jan 03 '13 at 07:57
That's working. But still have an issue. Let say I have a parent content and inside that another content but smaller than parent. Within that child content I have a TextBox. When I animate this TextBox, it only animates inside the child content. I want it to be animated over the parent content. Can you help me for that? – sura2k Jan 03 '13 at 09:36

score 1 · Answer 2 · answered Jan 03 '13 at 21:21

Check my example here : http://gwtquery-plugins.googlecode.com/svn/branches/droppable_1_0/demo/DraughtsSample/DraughtsSample.html

I use the fadeIn GQuery method method to fade in each piece of the board. You can find the code there : http://code.google.com/p/gwtquery-plugins/source/browse/trunk/droppable/sample/src/main/java/gwtquery/plugins/droppable/client/draughtssample/CheckerBoard.java#116

score 0 · Answer 3 · answered Jan 03 '13 at 05:18

0

Why dont you use the .each() function to loop through your "widgets".

var map = { 
  'mywidget1': '#mywidget1', 
  'mywidget2': '#mywidget2' 
}; 
$.each(map, function(key, value) {
  $(value).fadeIn(...);
});

or if they all have a something in common (i.e. class of tag combination etc.) this would be even easier.

See .each() jQuery API

answered Jan 03 '13 at 05:18

Tyler Durden

1,016
15
24

That will start simultaneous (more or less) fadeIn() on all the widgets. – Carl Jan 03 '13 at 05:24

score 0 · Answer 4 · answered Jan 04 '13 at 16:07

0

You are overriding an incorrect method: f(Event) is used for events, change it by f():

$(myWidget1).fadeIn(new Function(){
  public void f() {
     $(myOtherWidget).fadeIn();
  }
});

answered Jan 04 '13 at 16:07

Manolo Carrasco Moñino

9,723
1
22
27

GwtQuery - fadeIn one after another

4 Answers4