Question

我有一个自定义类，如下工作正常，按钮增大/缩小以容纳文本，bg图像在点击时更改。我要解决的问题是如何在调用clicked / notClicked时“fadeIN”一个或其他图像这是我的代码

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。它提供了淡入淡出＆amp; fadeOut特效（和许多其他JQuery好东西），它是跨浏览器兼容的，似乎非常活跃。

GWT - 淡入/淡出背景图像

2 个答案: