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>