Kendo UI

jQuery + Kendo UI + MockJax

by RedF

HTML

<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.blueopal.min.css">
<input type="button" id="show" value="show" /> <input type="button" id="hide" value="hide" /> 
<div class="blue">Hello</div>

CSS

.blue {
    background-color: blue;
    width: 200px;
    height: 200px;
    line-height: 200px;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    display: none;
}

JavaScript

kendo.fx.paintRed = {
    setup: function(element, options) {
        return $.extend( { background: "red", borderRadius: 100 }, options.properties);
    }
};

$("#show").click(function() {
    $(".blue").kendoStop()
    .kendoAnimate({ effects: "slideIn:down", show: true, duration: 1000 });
});

$("#hide").click(function() {
    $(".blue").kendoStop()
    .kendoAnimate({ effects: "slideIn:down", reverse: true, hide: true });
});