jQuery CSS watch plugin

Watch/Monitor attribute attribute changes.

Feedback to @leifcr
Source: Github
Unit tests: Unit tests
Documentation: Github (Readme.md)

Example

Click to grow the box below. (Note that the moving box will also notify about the change in position.)

This div will grow

Change 'color' and 'background-color' | Change 'color' | Change 'background-color'

This div will change colours

Click to move the box below.

This div will move

Output from the event callbacks

If the element that can grow is changed, it's width and height is shown here.

If the element that can move is changed, it's top and left position is shown here.

If the element that can change colors is changed, it's color and background-color is shown here.

How jQuery css watch was initialized in this example using CoffeeScript (yes you should use it...):

# for the growing div:
$('#watch-me-grow').on("css-change", (event, change) =>
  $(".output_grow").text("I'm growing: width: #{change.width} height: #{change.height} ");
)
$('#watch-me-grow').csswatch({props: 'width,height', 
                              props_functions: {"width":"width()", "height":"height()"} 
                            })

# for the moving div:
$('#watch-me-move').on("css-change", (event, change) =>
  $(".output_position").text("I'm growing: width: #{change.width} height: #{change.height} ");
)
$('#watch-me-move').csswatch({props: 'top,left', 
                              props_functions: {"top":"offset().top", "left":"offset().left"} 
                            })

# for the color changing div
$('#watch-me-change-colors').on("css-change", (event, change) =>
  $(".output_colors").text("I got some new colors: #{JSON.stringify(change)}");
)
$('#watch-me-change-colors').csswatch({props: 'color,background-color'})