GWT - Затухание фонового изображения

Question

У меня есть собственный класс, который работает нормально, кнопка растет/сжимается, чтобы разместить текст и изменения изображения bg одним щелчком. Probem Я хочу, чтобы решить, как к «FadeIn» один или другое изображение при нажатии/notClicked называется Вот мой код

public ExpandingOvalButton(String text) { 
    if (text.length() > 15) { 
     label.getElement().getStyle().setFontSize(20, Unit.PX); 
    } else { 
     label.getElement().getStyle().setFontSize(30, Unit.PX); 
    } 

    int width = 120; 
    initWidget(panel); 

    label.setText(text); 
    // width = width + (text.length() * 8); 
    String widthStr = width + "px"; 
    image.setWidth(widthStr); 
    image.setHeight("100px"); 
    button = new PushButton(image); 
    button.setWidth(widthStr); 
    button.setHeight("50px"); 
    panel.add(button, 0, 0); 
    panel.add(label, 18, 14); 
} 

public void isClicked() 
{ 
    image.setUrl("images/rectangle_green.png"); 
} 

public void unClicked() 
{ 
    image.setUrl("images/rectangle_blue.png"); 
} 

@Override 
public HandlerRegistration addClickHandler(ClickHandler handler) { 
    return addDomHandler(handler, ClickEvent.getType()); 
} 

public void setButtonEnabled(boolean enabled) { 
    // panel.setVisible(enabled); 
    // this.label.setVisible(enabled); 
    this.button.setVisible(enabled); 
} 

Answer 1

Вот общий класс утилита для выцветает любой элемент:

public class ElementFader { 

    private int stepCount; 

    public ElementFader() { 
     this.stepCount = 0; 
    } 

    private void incrementStep() { 
     stepCount++; 
    } 

    private int getStepCount() { 
     return stepCount; 
    } 

    public void fade(final Element element, final float startOpacity, final float endOpacity, int totalTimeMillis) { 
     final int numberOfSteps = 30; 
     int stepLengthMillis = totalTimeMillis/numberOfSteps; 

     stepCount = 0; 

     final float deltaOpacity = (float) (endOpacity - startOpacity)/numberOfSteps; 

     Timer timer = new Timer() { 

      @Override 
      public void run() { 
       float opacity = startOpacity + (getStepCount() * deltaOpacity); 
       DOM.setStyleAttribute(element, "opacity", Float.toString(opacity)); 

       incrementStep(); 
       if (getStepCount() == numberOfSteps) { 
        DOM.setStyleAttribute(element, "opacity", Float.toString(endOpacity)); 
        this.cancel(); 
       } 
      } 
     }; 

     timer.scheduleRepeating(stepLengthMillis); 
    } 
} 

телефонный код, например:

new ElementFader().fade(image.getElement(), 0, 1, 1000); // one-second fade-in 
new ElementFader().fade(image.getElement(), 1, 0, 1000); // one-second fade-out 

Answer 2

Вы можете использовать GwtQuery. Он обеспечивает fadeIn & эффекты fadeOut (и многие другие плюсы JQuery), он совместим с кросс-браузером и, кажется, довольно активен.