Kendo UI slide experiments using kendoAnimate

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:40px;border:1px solid blue; min-height:100px" id="bar" data-bind="slideDown: visible">
        Hello again, this is more sliding text!
    </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)) {
			$(element).kendoStop().kendoAnimate({ effects: "slideIn:down", show: true, duration: 1200 });
		} else {
			$(element).kendoStop().kendoAnimate({ effects: "slideIn:down", reverse: true, hide: true, duration: 1200 });
		}
	}
};

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(1200); // Make the element visible
        }
        else {
			$(element).slideUp(1200);   // Make the element invisible
        }
	}
};


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

ko.applyBindings(viewModel);