Example usage for com.google.gwt.query.client GQuery animate

List of usage examples for com.google.gwt.query.client GQuery animate

Introduction

In this page you can find the example usage for com.google.gwt.query.client GQuery animate.

Prototype

public GQuery animate(Object stringOrProperties, int duration, Function... funcs) 

Source Link

Document

The animate() method allows you to create animation effects on any numeric Attribute, CSS properties, or color CSS property.

Usage

From source file:com.arcbees.chosen.client.AbstractMobileChosenImpl.java

License:Apache License

public void animateListItem(GQuery item, final Boolean addClass) {
    if (getOptions().isMobileAnimation()) {
        final String paddingTop = item.css("padding-top");
        final String paddingBottom = item.css("padding-bottom");
        final int speed = getOptions().getMobileAnimationSpeed();

        item.animate("height: 0, padding-top: 0, padding-bottom: 0", speed, new Function() {
            public void f() {
                $(this).animate(
                        "height: auto, padding-top: " + paddingTop + ", padding-bottom: " + paddingBottom,
                        speed);//from w w w  .j ava 2  s .  co  m
                $(this).toggleClass(getCss().resultSelected(), addClass);
            }
        });
    } else {
        $(this).toggleClass(getCss().resultSelected(), addClass);
    }
}

From source file:com.pronoiahealth.olhie.client.pages.AbstractPage.java

License:Open Source License

/**
 * Add full page scrolling. This can only be done before the page is loaded.
 * //  w  ww. j  a v a  2  s.c o  m
 * @param fullPageScrollingActive
 */
protected void addFullPageScrolling() {
    // Activate full page scrolling
    // Get the root div
    final GQuery gObj = AppSelectors.INSTANCE.getCenterBackground();

    // Called when scrolling stops
    // Timer set in scroll event
    // Address weird Chrome/Safari (Webkit) issue
    // Just asking for some data from the element emitting
    // scroll events seems to refresh the display and
    // help fix the issue
    scrollStopTimer = new Timer() {
        @Override
        public void run() {
            int scrollTop = gObj.scrollTop();
            // gObj.scrollTop(scrollTop + 3);
            // gObj.scrollTop(scrollTop);
        }
    };

    // Make sure its overflow is set to auto
    gObj.css(CSS.OVERFLOW.with(Overflow.AUTO));

    // State of scroll link
    gObj.data("scrollLinkActive", Boolean.FALSE);

    // Create the scroll link
    scrollLink = $("<a href=\"#\" class=\"ph-BulletinBoard-Scrollup\">Scroll</a>");

    final Function fadeIn = new Function() {
        @Override
        public void f(Element e) {
            scrollLink.css(Properties.create("opacity: 1.0;"));
            // super.f(e);
        }
    };

    final Function fadeOut = new Function() {
        @Override
        public void f(Element e) {
            scrollLink.css(Properties.create("opacity: 0.0;"));
            // super.f(e);
        }
    };

    // Append the link to the root div
    gObj.append(scrollLink);

    // Bind the scroll event
    gObj.bind(Event.ONSCROLL, new Function() {
        @Override
        public boolean f(Event e) {
            // GQuery rootDiv = $(e);
            // int scrollTop = rootDiv.scrollTop();
            // Set timer
            scrollStopTimer.cancel();
            scrollStopTimer.schedule(500);

            // Test scroll top
            int scrollTop = gObj.scrollTop();
            boolean scrollLinkActive = (Boolean) gObj.data("scrollLinkActive");
            if (scrollTop >= 100 && scrollLinkActive == false) {
                gObj.data("scrollLinkActive", Boolean.TRUE);
                scrollLink.fadeIn(500, fadeIn);
            } else if (scrollTop < 100 && scrollLinkActive == true) {
                gObj.data("scrollLinkActive", Boolean.FALSE);
                scrollLink.fadeOut(500, fadeOut);
            }

            // return super.f(e);
            return false;
        }
    });

    // Bind to the scrollup link
    scrollLink.bind(Event.ONCLICK, new Function() {
        @Override
        public boolean f(Event e) {
            gObj.animate("scrollTop: 0", 500, (Function) null);
            scrollLink.hide();
            return false;
        }
    });

    this.fullPageScrollingActive = true;
}

From source file:com.pronoiahealth.olhie.client.widgets.scrolldiv.ScrollDiv.java

License:Open Source License

@PostConstruct
protected void postConstruct() {
    // Activate full page scrolling
    // Get the root div
    final GQuery gObj = $(root);

    // Make sure its overflow is set to auto
    gObj.css(CSS.OVERFLOW.with(Overflow.AUTO));

    // Create the scroll link
    scrollLink = $("<a href=\"#\" class=\"ph-BulletinBoard-Scrollup\">Scroll</a>");

    // Append the link to the root div
    gObj.append(scrollLink);/*from   w w  w  .j  a  v  a 2  s  .  c om*/

    // Bind the scroll event
    gObj.bind(Event.ONSCROLL, new Function() {
        @Override
        public boolean f(Event e) {
            GQuery rootDiv = $(e);
            int scrollTop = rootDiv.scrollTop();
            if (scrollTop > 100) {
                scrollLink.fadeIn(500, new Function() {
                    @Override
                    public void f(com.google.gwt.dom.client.Element e) {
                        $(e).css(Properties.create("opacity: 1.0;"));
                        // super.f(e);
                    }
                });
            } else {
                scrollLink.fadeOut(500, new Function() {
                    @Override
                    public void f(com.google.gwt.dom.client.Element e) {
                        $(e).css(Properties.create("opacity: 0.0;"));
                        // super.f(e);
                    }
                });
            }
            return super.f(e);
        }
    });

    // Bind to the scrollup link
    scrollLink.bind(Event.ONCLICK, new Function() {
        @Override
        public boolean f(Event e) {
            gObj.animate("scrollTop: 0", 500, (Function) null);
            return false;
        }
    });
}