Composite Effects
Depending on the specific implementation of the effects, you can combine them.
The following example demonstrates how to combine effects which run on the same element.
<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();
// Calling reverse will zoom in and fade in.
</script>
The following example demonstrates how to combine effects which run on different elements by using the jQuery.when configuration.
<div id="foo">
I will fade out.
</div>
<div id="baz">
I will also fade out.
</div>
<script>
// Use the jQuery Deferred configuration to chain multiple effects.
var eleFoo = $("#foo"),
eleBaz = $("#baz");
$.when(kendo.fx(eleFoo).fadeOut().play(),
kendo.fx(eleBaz).fadeOut().play()).then(function(){
// This will be called when both animations are completed.
alert("Both elements faded!");
});
</script>