Knockoutjs.com - Animated Transitions

http://knockoutjs.com/examples/animatedTransitions.html

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div class='liveExample'> 
    <p> 
        <label>
            <input type='checkbox' data-bind='checked: display' />
            Active?
        </label>
    </p>
     
    <p data-bind='fadeVisible: IsActive()'>        
    </p>    
</div>

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

.liveExample input { margin: 0 0.3em 0 1em; }

JavaScript

var Model = function() {
    var self = this;
    self.display= ko.observable(false);
    self.IsActive = ko.computed(function() {
        if (self.display()) return "Active."
        return "Not active."
    });
 
};

// Here's a custom Knockout binding that makes elements shown/hidden via jQuery's fadeIn()/fadeOut() methods
// Could be stored in a separate utility library
ko.bindingHandlers.fadeVisible = {
    init: function(element, valueAccessor) {
        // Initially set the element to be instantly visible/hidden depending on the value
        var value = valueAccessor();
        $(element).hide().html(ko.utils.unwrapObservable(value)).fadeIn();
    },
    update: function(element, valueAccessor) {
        // Whenever the value subsequently changes, slowly fade the element in or out
        var value = valueAccessor();
        $(element).hide().html(ko.utils.unwrapObservable(value)).fadeIn();
    }
};
 
ko.applyBindings(new Model ());