gwt mit jquery-Effekt möglich?

in meinem GWT, habe ich eine Taste, die wie unten abfeuern neues Widget erstellengwt mit jquery-Effekt möglich?

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


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

}

wie Jquery verwenden, so dass, wenn die MyCustomWidget() zeigen auf dem Bildschirm ist es jquery „fadein“ -Effekt

mit

Ich habe bereits versucht, jsni zum Aufruf von jquery in new MyCustomWidget() onload() zu setzen, funktioniert aber nicht. Kann mich das anleiten?

Quelle

2010-11-23 cometta

Sie setzt können so etwas wie t versuchen his: 1) Widget erstellen 2) Widget css display Eigenschaft auf "display: none" setzen 3) Widget zu htmlPanelHolder hinzufügen 4) JSNI-Methode aufrufen: public static nativ void fadeInWidget()/* - { $ ("mywidget: hidden")) .fadeIn ("langsam"); } - * /; –

@ Xo4yHaMope. für Schritt 4, sollte ich FadeInWidget() in Schritt 1 Widget-Konstruktor nach Initwidget() aufrufen? oder sollte ich fadeInWidget() innerhalb onload() aufrufen? . auch, $ ("mywidget: versteckt"), ist das die id =? für htmlPanelHolder? – cometta

Sie sollten fadeInWidget() ganz am Ende aufrufen, also sollte es nach initwidget() aufrufen. Tut mir leid, es gibt einen Fehler im jQuery-Code, der wie folgt aussehen sollte: $ ('# myDivId'). FadeIn ('langsam'); oder $ ('. myCssClass'). fadeIn ("langsam"); –

Es ist auch möglich, ein Fade-in-Effekt ohne Verwendung von jQuery zu erstellen. Wenn Sie das tun wollen, nur eine Animation-Klasse wie folgt schreiben:

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

Dann können Sie es auf jedem Widget verwenden:

new FadeInAnimation(myWidget).run(5000);

Hinweis: Der Aufruf von getStyle().setOpacity(..) kümmert sich sogar um der Sonderfall IE6/7, wo es style.filter = 'alpha(opacity=' + (value * 100) + ')';

Quelle

2010-11-23 16:39:19

Danke für den Tipp! Habe es einfach auf meiner Website benutzt. :) –