Animation Effect Options?

3 posts, 0 answers
  1. Justavian
    Justavian avatar
    23 posts
    Member since:
    Aug 2010

    Posted 17 May 2014 Link to this post

    I'm trying to get my notifications to collapse, rather than just fade out.  I've looked all over for a list of possible animations, but all i can find is a few examples (using fade and zoom), and a forum post from 2011 that said the animation types would soon be listed in the documentation for Window.

    I've come across the "collapseVertical" option in the javascript, but that doesn't work for the notification.  Here's what i tried:

    var staticNotification = $("<span></span>").kendoNotification({
    appendTo: $(".topStaticNotification"),
    animation: {
    close: {
    effects: "collapseVertical"
    hide: hideNotification

    If i put in "fadeOut", then the notification behaves as normal.  But it doesn't look like any other options can work there.  Is this possible by just using the built in animation somehow?

    My next thought was to just catch the "hide" event and manually collapse it (hence the hideNotification above).  But, for whatever reason, this doesn't seem to work either.

    Any ideas?
  2. Justavian
    Justavian avatar
    23 posts
    Member since:
    Aug 2010

    Posted 17 May 2014 in reply to Justavian Link to this post

    For now, i just set the hideOnClick to false and attached my own click handlers.  It would still be nice to know what all of the options are for the animation.
  3. Kiril Nikolov
    Kiril Nikolov avatar
    2596 posts

    Posted 19 May 2014 Link to this post

    Hello Justavian,

    All the available Kendo UI animations are shown here:

    Please note that some of these animations require more than one element to be animated, which makes them unapplicable for the Kendo UI Notification widget.

    Kiril Nikolov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top