animationObject
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.
Example - disable open and close animations
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: false
});
</script>Example - configure the animation
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: {
close: {
effects: "fadeOut zoom:out",
duration: 300
},
open: {
effects: "fadeIn zoom:in",
duration: 300
}
}
});
</script>animation.closeObject
The animation that is applied when the popup is closing.
Example - configure the close animation
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
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
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: {
close: {
effects: "zoomOut",
}
},
dataSource: ["Item1", "Item2", "Item3"]
});
</script>animation.close.durationNumber(default: 100)
The duration of the close animation in milliseconds.
Example
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: {
close: {
effects: "zoomOut",
duration: 500
}
},
dataSource: ["Item1", "Item2", "Item3"]
});
</script>animation.openObject
The animation played when the suggestion popup is opened.
Example - configure the open animation
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
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
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: {
open: {
effects: "zoomIn",
}
},
dataSource: ["Item1", "Item2", "Item3"]
});
</script>animation.open.durationNumber(default: 200)
The duration of the open animation in milliseconds.
Example
<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: {
open: {
effects: "zoomIn",
duration: 400
}
},
dataSource: ["Item1", "Item2", "Item3"]
});
</script>In this article