jQuery.sub and cssHooks

by Reusablecode

HTML

<div id="box">click me</div>

CSS

#box {
  width: 200px;
  height: 200px;
  background: red;
}

#box.small { background: blue; }

JavaScript

var sub$ = $.sub();

sub$.cssNumber.scale = true;

sub$.cssHooks.scale = {
  set: function( elem, value ) {
    $(elem).data('scale', value );
    var prop = 'scale('+value+')';
    elem.style.WebkitTransform = prop;
    elem.style.MozTransform = prop;
    elem.style.OTransform = prop;
  },
  get: function( elem, computed ) {
    var transform = $.data( elem, 'scale' );
    return transform && transform.scale ? transform.scale : 1;
  }
};

$(function(){
  $('#box').click(function(){
    var $this = sub$(this),
        size = $this.hasClass('small') ? 1 : 0.2;
    $this.css({ scale: size }).toggleClass('small');
  });
});