PageTurn
Folds and the face of the effect around the specified axis) in order to reveal the back. The effect needs certain markup and styling in order to function properly. The element should be positioned absolutely/relatively, and contain two child elements (face and back) with the same size as their parent, positioned absolutely on top of each other.
<style>
/* in order for the effect to work, a temporary clone of the page is created (and its ID is removed) - so we use classes to style the elements */
#container {
position: relative;
width: 200px;
height: 200px;
}
#container .foo {
position: absolute;
width: 200px;
height: 200px;
background: blue;
}
#container .bar {
position: absolute;
width: 200px;
height: 200px;
background: red;
}
</style>
<div id="container">
<div class="bar">Page 2</div>
<div class="foo">Page 1</div>
</div>
<script>
kendo.fx($("#container")).pageturn("horizontal", $(".foo"), $(".bar")).duration(1000).play();
// or
// kendo.fx($("#container")).pageturnHorizontal($(".foo"), $(".bar")).play();
</script>