animationBoolean|Object

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

animation:true is not a valid configuration.

Example - disable open and close animations

<select id="multiselect" multiple="multiple">
    <option>Item1</option>
    <option>Item2</option>
</select>
<script>
$("#multiselect").kendoMultiSelect({
  animation: false
});
</script>

Example - configure the animation

<select id="multiselect" multiple="multiple">
    <option>Item1</option>
    <option>Item2</option>
</select>
<script>
$("#multiselect").kendoMultiSelect({
  animation: {
   close: {
     effects: "fadeOut zoom:out",
     duration: 300
   },
   open: {
     effects: "fadeIn zoom:in",
     duration: 300
   }
  }
});
</script>

animation.closeObject

The animation configuration for closing the suggestion popup. This object can contain properties such as effects and duration that define how the popup will close when it becomes hidden. The close animation is played when the user selects an item, clicks outside the widget, or when the popup is programmatically closed.

Example - configure the close animation

<select id="multiselect" multiple="multiple">
    <option>Item1</option>
    <option>Item2</option>
</select>
<script>
$("#multiselect").kendoMultiSelect({
  animation: {
   close: {
     effects: "zoom:out",
     duration: 300
   }
  }
});
</script>

animation.close.effectsString

The effect(s) to use when playing the close animation. Multiple effects should be separated with a space.

Complete list of available animations

Example

<select id="multiselect" multiple="multiple">
    <option>Item1</option>
    <option>Item2</option>
</select>
<script>
$("#multiselect").kendoMultiSelect({
  animation: {
   close: {
     effects: "fadeOut zoom:out"
   }
  }
});
</script>

animation.close.durationNumber(default: 100)

The duration of the close animation in milliseconds.

Example

<select id="multiselect" multiple="multiple">
    <option>Item1</option>
    <option>Item2</option>
</select>
<script>
$("#multiselect").kendoMultiSelect({
  animation: {
   close: {
     duration: 500
   }
  }
});
</script>

animation.openObject

The animation played when the suggestion popup is opened.

Example - configure the open animation

<select id="multiselect" multiple="multiple">
    <option>Item1</option>
    <option>Item2</option>
</select>
<script>
$("#multiselect").kendoMultiSelect({
  animation: {
   open: {
     effects: "zoom:in",
     duration: 300
   }
  }
});
</script>

animation.open.effectsString

The effect(s) to use when playing the open animation. Multiple effects should be separated with a space.

Complete list of available animations

Example

<select id="multiselect" multiple="multiple">
    <option>Item1</option>
    <option>Item2</option>
</select>
<script>
$("#multiselect").kendoMultiSelect({
  animation: {
   open: {
     effects: "fadeIn zoom:in"
   }
  }
});
</script>

animation.open.durationNumber(default: 200)

The duration of the open animation in milliseconds.

Example

<select id="multiselect" multiple="multiple">
    <option>Item1</option>
    <option>Item2</option>
</select>
<script>
$("#multiselect").kendoMultiSelect({
  animation: {
   open: {
     duration: 600
   }
  }
});
</script>