Getting Started with the FX
This guide demonstrates how to get up and running with the Kendo UI for jQuery FX.
After the completion of this guide, you will be able to achieve the following end result:
<div id="foo">
I will be faded out and zoomed out.
</div>
<script>
var effectWrapper = kendo.fx($("#foo"));
var fadeOutEffect = effectWrapper.fadeOut();
fadeOutEffect.add(effectWrapper.zoomOut());
fadeOutEffect.play();
</script>
1. Create the FX instance
To create the FX instances, use the jQuery kendo.fx selector wrapper.
<div id="foo">
I will be animated
</div>
<script>
var effectWrapper = kendo.fx($("#foo"));
</script>
Once the basic initialization is completed, you can start applying effects to the FX.
2. Apply Effects
In this step, you will apply the fadeOut and the zoomOut effects.
<div id="foo">
I will be animated
</div>
<script>
var effectWrapper = kendo.fx($("#foo"));
var fadeOutEffect = effectWrapper.fadeOut(); // Apply fade out effect.
fadeOutEffect.add(effectWrapper.zoomOut()); // Apply zoom out effect.
</script>
See the FX API reference for more available effects.
3. Play Effects
In this step, you will play the effects.
<div id="foo">
I will be faded out and zoomed out.
</div>
<script>
var effectWrapper = kendo.fx($("#foo"));
var fadeOutEffect = effectWrapper.fadeOut();
fadeOutEffect.add(effectWrapper.zoomOut());
fadeOutEffect.play(); // Play the effects.
</script>