| title | page_title |
|---|---|
effects |
API reference for Kendo UI Effects |
Collection of effects/animation related utilities.
Calculates the offset and dimensions of the given element
The element to calculate dimensions for.
Object An object with top, left, width and height fields in pixels.
<div id="foo" style="position: absolute; top:10px; left: 10px; height: 200px; width: 200px"></div>
<script>
var fooBox = kendo.effects.box($("#foo"));
console.log(fooBox); // { top: 10, left: 10, width: 200, height: 200 }
</script>
Determines the fill scale factor based on two elements' boxes.
The first element.
The second element.
Number The fill scale for the two elements.
<div id="foo" style="position: absolute; top:10px; left: 10px; height: 200px; width: 200px"></div>
<div id="bar" style="position: absolute; top:10px; left: 10px; height: 100px; width: 50px"></div>
<script>
var fooBox = kendo.effects.box($("#foo")),
var barBox = kendo.effects.box($("#bar"));
console.log(kendo.effects.fillScale(bar, foo); // 0.5;
</script>
Determines the fit scale factor based on two elements' boxes.
The first element.
The second element.
Number The fit scale for the two elements.
<div id="foo" style="position: absolute; top:10px; left: 10px; height: 200px; width: 200px"></div>
<div id="bar" style="position: absolute; top:10px; left: 10px; height: 100px; width: 50px"></div>
<script>
var fooBox = kendo.effects.box($("#foo")),
var barBox = kendo.effects.box($("#bar"));
console.log(kendo.effects.fitScale(bar, foo); // 0.25;
</script>
Determines the transform origin point based on two elements' boxes. The method is primarily used in zoom/transfer effects.
The first element.
The second element.
Object An object with x and y fields that represent the transform origin point.
<div id="foo" style="position: absolute; top:10px; left: 10px; height: 200px; width: 200px; border: 1px solid red;">foo</div>
<div id="bar" style="position: absolute; top:60px; left: 60px; height: 100px; width: 100px; border: 1px solid blue;">bar</div>
<script>
console.log(kendo.effects.transformOrigin(kendo.effects.box("#bar"), kendo.effects.box("#foo"))); // x: 101, y: 101
</script>