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 - 淡入/淡出背景圖像

回答

相關問題