Kendo UI slide experiments using kendo.fx

HTML

<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<button data-bind="click: toggleVisibility">Toggle visibility</button>
<div style="position:absolute;top:30px;">
    <div>
        POVT: Plain Old Visible Text
    </div>
    <div id="foo" data-bind="slideVisible: visible">
        Well hello this here is some sliding text!
    </div>
</div>
<div style="position:absolute;top:80px;">
    <div style="display:inline-block">
        MPOVT: More Plain Old Visible Text
    </div>
    <div style="position:absolute;top:40px;" id="bar" data-bind="slideDown: visible">
        Hello again, this is more sliding text!
    </div>
</div>

CSS

h1 { font-size: 1.5em; }
h2 { font-size: 1.25em; }

JavaScript

ko.bindingHandlers.slideDown = {
	init: function (element, valueAccessor) {
		// Initially set the element to be instantly visible/hidden depending on the value
        // Get the current value of the current property we're bound to
		var value = ko.utils.unwrapObservable(valueAccessor());
        // jQuery will hide/show the element depending on whether "value" or true or false
		$(element).toggle(value);
	},
	update: function (element, valueAccessor) {
		// Whenever the value subsequently changes, slowly slide the element down or up
		var value = valueAccessor();
		if (ko.utils.unwrapObservable(value)) {
			kendo.fx($(element)).slideIn("down").duration(1200).play();
		} else {
            // uncommenting the next line will break all animation!!
			//kendo.fx($(element)).slideIn("down").reverse().duration(1200).play();
		}
	}
};

ko.bindingHandlers.slideVisible = {
	init: function (element, valueAccessor) {
        // Get the current value of the current property we're bound to
		var value = ko.utils.unwrapObservable(valueAccessor());
        // jQuery will hide/show the element depending on whether "value" or true or false
		$(element).toggle(value);
	},
	update: function (element, valueAccessor) {
		// Whenever the value subsequently changes, slowly slide the element down or up
		var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
			$(element).slideDown(300); // Make the element visible
        }
        else {
			$(element).slideUp(300);   // Make the element invisible
        }
	}
};


var viewModel = {
   visible: ko.observable(false),
   toggleVisibility: function() {
      this.visible(!this.visible()); 
   }
};

ko.applyBindings(viewModel);