gwt using jquery effect possible?

Question

in my gwt, i have a button that fire like below to create new widget

 @UiHandler("buttonfire")
  void addNewWidget(ClickEvent event) {


     htmlPanelHolder.add(new MyCustomWidget(),"placeholder");

 }

how to use jquery so that when the MyCustomWidget() show on screen it is using jquery "fadein" effect

i already tried putting jsni to call jquery inside new MyCustomWidget() onload() but doesnt work. can guide me on this?

Answer 1

It's also possible to create a fade in effect without using jQuery. If you want to do that, just write an Animation class like this:

public class FadeInAnimation extends Animation {
    private final UIObject uiObject;

    FadeInAnimation(final UIObject uiObject) {
      this.uiObject = uiObject;
    }

    @Override
    protected void onUpdate(final double progress) {
      uiObject.getElement().getStyle().setOpacity(progress);
    }
}

Then you can use it on any widget:

new FadeInAnimation(myWidget).run(5000);

Note: The call to getStyle().setOpacity(..) even takes care of the special case IE6/7, where it sets style.filter = 'alpha(opacity=' + (value * 100) + ')';

Answer 2

You can also try with the GQuery library: http://code.google.com/p/gwtquery/

Answer 3

use the fadeIn effect of GwtQuery