kendo transfer test

by xacto

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
<div>
    <a href="#" onclick="fadeAndZoom();">fadeAndZoom</a>
    <a href="#" onclick="reverseFadeAndZoom();">reverseFadeAndZoom</a>
    <a href="#" onclick="another();">another</a>
    <a href="#" onclick="another2();">another2</a>
    <a href="#" onclick="another3();">another3</a>
</div>
<div style="position: relative;">
    <div id="FZObject" style="position: absolute;">FZObject</div>
</div>
<script>
    var effectWrapper = kendo.fx($("#FZObject"));
        var fadeOutEffect = effectWrapper.fadeOut();
        fadeOutEffect.add(effectWrapper.zoomOut());

    function fadeAndZoom() {
        fadeOutEffect.play();
    }
    
    function reverseFadeAndZoom() {
        fadeOutEffect.reverse();
    }
    
    function another() {
        var effect = kendo.fx($("#FZObject"));
        $.when(effect.fadeOut().add(effect.zoomIn().startValue(50).endValue(1)).duration(1000).play()).then(function () {
           $("#FZObject").hide();
    });
    }
    
    function another2() {
        var effect = kendo.fx($("#FZObject"));
    //effect.fadeOut().add(effect.zoomOut().endValue(50)).duration(1000).play();
    effect.zoomOut().endValue(5).duration(1000).add(effect.fadeOut().duration(2000)).play();
    }
    
    function another3() {
        var effect = kendo.fx($("#FZObject"));
    
        effect.fadeOut().duration(1000).play();
    }
</script>