JSFiddle - React, Tailwind, and code Playground

by Muhammad Raheel

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <div id="block">Hello!</div>

    <input data-bind="click:Animate" type="button" value="Animate" >

CSS

div {
background-color: #bca;
width: 100px;
border: 1px solid green;
}

JavaScript

function vm(){
    var self = this
    self.AdjustedWidth = ko.observable('70%')
    self.Width = ko.observable()
    self.Width.subscribe(function(data){
        console.log(data)
    })

    self.Animate = function(){
        $( "#block" ).animate({
            width: self.AdjustedWidth(),
        }, {
            duration: 1500,
            progress: function() {
                self.Width($('#block').width());
            }
        });            
    }
}
    
    
        ko.applyBindings(new vm())