Kendo UI for jQuery 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:

Kendo UI for jQuery Kendoka image

The FX is part of Kendo UI for jQuery, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

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