JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div></div>

CSS

div {
    background: #bada55;
    width: 300px;
    height: 100px;
}

JavaScript

//
// New, Sexy, Watch Plugin!
//
(function(a){a.extend(a.fn,{watch:function(b,c,d){if(typeof c=="function"){d=c;c={}}if(typeof d!="function")d=function(){};c=a.extend({},{throttle:10},c);var e=function(a){var b=a.data(),c=false,d;for(var e=0;e<b.props.length;e++){d=a.css(b.props[e]);if(b.vals[e]!=d){b.vals[e]=d;c=true;break}}if(c&&b.cb){b.cb.call(a,b)}};return this.each(function(){var f=a(this),g=function(){e.call(this,f)},h={props:b.split(","),cb:d,vals:[]};a.each(h.props,function(a){h.vals[a]=f.css(h.props[a])});f.data(h);if(typeof this.onpropertychange=="object"){f.bind("propertychange",d)}else if(a.browser.mozilla){f.bind("DOMAttrModified",d)}else{setInterval(g,c.throttle)}})}})})(jQuery)

//
// Examples
//    
$("div").watch("width", function(){
    // .. do something               
}).animate({"width":"100px"},500);

             
$("div").delay(500).watch("width", { throttle:100 }, function(){
    // .. do something    
}).animate({"height":"300px"}, 500);
             
             
// uncorporate combinations