GWT - 淡入/淡出背景图像

我有一个自定义类如下，它工作正常，按钮增长/缩小以适应文本和bg图像更改点击。 Probem我要解决的是如何“淡入”一个或其他图像点击时/ notClicked被称为这里是我的代码GWT - 淡入/淡出背景图像

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

来源

2013-03-26 MayoMan

这里是一个辅助类褪色的任何元素：

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

来源

2013-03-26 20:40:56 user1332981

你可以使用GwtQuery。它提供了fadeIn & fadeOut效果（和许多其他JQuery好东西），它是跨浏览器兼容的，并且似乎非常活跃。

来源

2013-03-28 10:17:15 danielsan

GWT - 淡入/淡出背景图像

回答

相关问题