$.watch() Download jquery.watch.js

Parameters:

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

  1. Space delimited list of CSS properties or element attributes to watch
  2. Callback function to be run when one of the values has changed
  3. Timeout in milliseconds to run attribute check (only used for browsers that don't support Mutation Observers, DOMAttrModified or propertychange)

Example:


Animate Box

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

Demo 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'});
    });

});