$.watch() Download jquery.watch.js

Parameters:

$('#someElement').watch({1}, {2}, {3});

1. Comma seperate list of CSS attributes to watch for
2. Callback function to be run when one of the CSS attributes has changed
3. Timeout in milliseconds to run attribute check (only used for browsers that don't support DOMAttrModified or propertychange)

Example:

Change Paragraph Width/Height - (click again to reset)

Clicking on the link will animate the red box to 400px width and 200px height. The .watch() plugin will fire an event as the dimensions continue to change. The callback function looks for the width of the box to be larger then 200px and then changes the background color to green once it is greater then or equal to that. As well, if the height is greater then 100px then the background color will switch to blue.
Back to Article

Code:

jQuery(function($){
    $(".demo span").watch('width,height', function(){
        if(parseFloat($(this).width()) >= 150){
            $(this).css({'background':'green'});									  
        }
        if(parseFloat($(this).height()) >= 200){
            $(this).css({'background':'blue'});									  
        }
    });
    
    $('.demo a').toggle(function(){
        $('.demo span').animate({'width':'400px','height':'200px'}, 1000);
    }, function(){
        $('.demo span').css({'width':'50px','height':'50px','background':'red'});
    });
                    
});