FX Overview

The Kendo UI FX (Effects) instances provide a rich, extensible, and performance-optimized toolset for element transitions.

Kendo UI supports the following effects:

Whenever possible, effects are hardware-accelerated through CSS transitions which makes them ideal for desktop and mobile devices. Unlike the CPU intensive JavaScript animations, animations that are implemented with CSS provide better frame rates and battery life. To show and hide certain parts of the user interface (UI), you can also play animations in reverse. For chaining and callbacks, the Kendo UI FX utilizes the jQuery Deferred utility.

Initializing FX Instances

To create the FX instances, use the jQuery kendo.fx selector wrapper. To create multiple effects, you can also use a single wrapper.

<div id="foo">
    I will be animated
</div>

<script>
    var effectWrapper = kendo.fx($("#foo"));
    var fadeOutEffect = effectWrapper.fadeOut();
    fadeOutEffect.play();
</script>

You can compress the code from the previous example to a single line.

<div id="foo">
    I will be animated
</div>

<script>
    kendo.fx($("#foo")).fadeOut().play();
</script>

Functionality and Features

See Also

In this article
Not finding the help you need? Improve this article