New to Kendo UI for jQuery? Start a free 30-day trial

Animation

configuration

Configures the opening and closing animations of the popup. Setting the animation option to false will disable the opening and closing animations. As a result the popup will open and close instantly.

animation:true is not a valid configuration.

animation

Boolean|Object

<div id="popup">CONTENT</div>
<script>
$("#popup").kendoPopup({
  animation: false
}).data("kendoPopup").open();
</script>

<div id="popup">CONTENT</div>
<script>
$("#popup").kendoPopup({
  animation: {
   close: {
     effects: "fadeOut zoom:out",
     duration: 300
   },
   open: {
     effects: "fadeIn zoom:in",
     duration: 300
   }
  }
}).data("kendoPopup").open();
</script>

animation.close

Object

The animation played when the popup is closed.

<div id="popup">CONTENT</div>
<script>
$("#popup").kendoPopup({
  animation: {
   close: {
     effects: "zoom:out",
     duration: 300
   }
  }
}).data("kendoPopup").open();
</script>

animation.open

Object

The animation played when the calendar popup is opened.

<div id="popup">CONTENT</div>
<script>
$("#popup").kendoPopup({
  animation: {
   open: {
     effects: "zoom:in",
     duration: 300
   }
  }
}).data("kendoPopup").open();
</script>

Animation

animation

animation.close

animation.open

Related Members