Post
Ask Question

Kendo UI Effects

Introduction

Kendo UI effects gives you a rich, intuitive, and performance-optimized toolset for element transitions. There are many effects like Expand, fade, slide in, flip, tile, and so on. In this blog, you will learn how to use the Kendo UI tile effects with JQuery. 

Tile Effect

The effects are processed through CSS transitions which makes them ideal for desktop and mobile devices. 

As a first step, we need to initialize FX instances. Use JQuery kendo.fx selector wrapper to create a FX instance. 

<!DOCTYPE html>
<html>
<head> 
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.119/styles/kendo.default-main.min.css" />
    <script src="https://kendo.cdn.telerik.com/2022.1.119/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.1.119/js/kendo.all.min.js"></script>

</head>
<body>

    <div id="example">
        <div id="wrap">
            <img id="gowtham" src="../KendoControlDemos/Images/MyImage.png" />
            
        </div>

        <script>
        $("#wrap img").hover(function() {
            kendo.fx(this).zoom("in").startValue(1).endValue(2).play();
        }, function() {
            kendo.fx(this).zoom("out").endValue(1).startValue(2).play();
        });
        </script>

        <style>
            #wrap {
                background-image: url("../KendoControlDemos/Images/Background_Image.png");
                width: 655px;
                height: 298px;
                margin: 2.5em auto;
                position: relative;
                -webkit-transform: translateZ(0);
            }

                #wrap img {
                    position: absolute;
                    width: 82px;
                    bottom: 65px;
                }
           
        </style>
    </div>
</body>
</html>

As per the above code the FX instance is created in the hover function and it extends with zoom function with start and end value. The play function plays the zoom effect. 

Zoom In

Zoom out

 

Reference

jQuery FX Documentation | FX Overview | Kendo UI for jQuery (telerik.com) 

Source code: click here

Happy Coding!!!