Updated: Watch Plugin OMG!

by darcyclarke

HTML

<div></div>

CSS

div {
 width: 600px;
 height: 100px;
 display: block;
 background: #bada55;  
}

JavaScript

// Updated Watch Plugin
(function($){
    $.extend($.fn, {
        watch : function(props,options,callback){
            if(typeof(options) == "function"){
                callback = options;
                options = {};
            }
            if(typeof(callback) != "function")
                callback = function(){};
            options = $.extend({}, { throttle:10 }, options);
            var check = function(el) {
                var data = el.data(),
                    changed = false,
                    temp;
                for(var i=0;i < data.props.length; i++){
                    temp = el.css(data.props[i]);
                    if(data.vals[i] != temp){
                        data.vals[i] = temp;
                        changed = true;
                        break;
                    }
                }
                if(changed && data.cb) {
                    data.cb.call(el, data);
                }
            };
            return this.each(function(){
                var el = $(this),
                    cb = function(){ check.call(this, el) },
                    data = { props:props.split(","), cb:callback, vals: [] };
                $.each(data.props, function(i){ data.vals[i] = el.css(data.props[i]); });
                el.data(data);
                if (typeof(this.onpropertychange) == "object"){
                    el.bind("propertychange", callback);
                } else if ($.browser.mozilla){
                    el.bind("DOMAttrModified", callback);
                } else {
                    setInterval(cb, options.throttle);
                }
            });
        }
    });
})(jQuery);

$("div").watch("width", { throttle: 100 }, function(){
    console.log(this);
}).animate({"width":"100px"},500);