rendering and onchange improvement

As animationFrame decouples from mouse event…

jqColorPicker.js

@@ -26,20 +26,19 @@
 			'tica,sans-serif;font-size:12px;font-weight:400;cursor:default;bo' +
 			'rder-radius:5px}.cp-color-picker>div{position:relative;overflow:' +
 			'hidden}.cp-xy-slider{float:left;height:128px;width:128px;margin-' +
-			'bottom:6px;background:linear-gradient(to right,rgba(255,255,255,' +
+			'bottom:6px;background:linear-gradient(to right,#FFF,rgba(255,255' +
-			'1)0,rgba(255,255,255,0)100%)}.cp-white{height:100%;width:100%;ba' +
+			',255,0))}.cp-white{height:100%;width:100%;background:linear-grad' +
-			'ckground:linear-gradient(to bottom,rgba(0,0,0,0)0,rgba(0,0,0,1)1' +
+			'ient(rgba(0,0,0,0),#000)}.cp-xy-cursor{position:absolute;top:0;w' +
-			'00%)}.cp-xy-cursor{position:absolute;top:0;width:10px;height:10p' +
+			'idth:10px;height:10px;margin:-5px;border:1px solid #fff;border-r' +
-			'x;margin:-5px;border:1px solid #fff;border-radius:100%;box-sizin' +
+			'adius:100%;box-sizing:border-box}.cp-z-slider{float:right;margin' +
-			'g:border-box}.cp-z-slider{float:right;margin-left:6px;height:128' +
+			'-left:6px;height:128px;width:20px;background:linear-gradient(red' +
-			'px;width:20px;background:linear-gradient(to bottom,red 0,#f0f 17' +
+			' 0,#f0f 17%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%)}.cp-z-' +
-			'%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%)}.cp-z-cursor{pos' +
+			'cursor{position:absolute;margin-top:-4px;width:100%;border:4px s' +
-			'ition:absolute;margin-top:-4px;width:100%;border:4px solid #fff;' +
+			'olid #fff;border-color:transparent #fff;box-sizing:border-box}.c' +
-			'border-color:transparent #fff;box-sizing:border-box}.cp-alpha{cl' +
+			'p-alpha{clear:both;width:100%;height:16px;margin:6px 0;backgroun' +
-			'ear:both;width:100%;height:16px;margin:6px 0;background:linear-g' +
+			'd:linear-gradient(to right,#444),rgba(0,0,0,0))}.cp-alpha-cursor' +
-			'radient(to right,rgba(68,68,68,1)0,rgba(0,0,0,0)100%)}.cp-alpha-' +
+			'{position:absolute;margin-left:-4px;height:100%;border:4px solid' +
-			'cursor{position:absolute;margin-left:-4px;height:100%;border:4px' +
+			' #fff;border-color:#fff transparent;box-sizing:border-box}',
-			' solid #fff;border-color:#fff transparent;box-sizing:border-box}',
 
 		ColorPicker = function(options) {
 			_color = this.color = new Colors(options);
@@ -47,7 +46,7 @@
 		};
 
 	ColorPicker.prototype = {
-		render: render,
+		render: preRender,
 		toggle: toggle
 	}
 
@@ -81,12 +80,12 @@
 				_$xy_slider._width = _$xy_slider.width();
 				_$xy_slider._height = _$xy_slider.height();
 				_color.setColor(extractValue(_$trigger[0]));
-				render(true);
+				preRender(true);
 			});
 		} else {
 			$(_$UI).hide(_options.animationSpeed, function() {
 				_$trigger.blur();
-				render(false);
+				preRender(false);
 			});
 		}
 	};
@@ -136,7 +135,7 @@
 			s: x / _$xy_slider._width * 100,
 			v: 100 - (y / _$xy_slider._height * 100)
 		}, 'hsv');
-		_animate(render);
+		preRender();
 	}
 
 	function z_slider(event) {
@@ -144,7 +143,7 @@
 			hsv = _color.colors.hsv;
 
 		_color.setColor({h: 360 - (z / _$xy_slider._height * 360)}, 'hsv');
-		_animate(render);
+		preRender();
 	}
 
 	function alpha(event) {
@@ -152,10 +151,10 @@
 			alpha = x / _$alpha._width;
 
 		_color.setColor({}, 'rgb', alpha > 1 ? 1 : alpha < 0 ? 0 : alpha);
-		_animate(render);
+		preRender();
 	}
 
-	function render(toggled) {
+	function preRender(toggled) {
 		var colors = _color.colors,
 			hueRGB = colors.hueRGB,
 			RGB = colors.RND.rgb,
@@ -180,32 +179,44 @@
 			a = alpha * _$alpha._width,
 			t3d = _GPU ? 'translate3d' : '';
 
-		_$xy_slider.css({
+		_$xy_slider._css = {
 			backgroundColor: 'rgb(' +
-				hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'});
+				hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'};
-		_$xy_cursor.css({
+		_$xy_cursor._css = {
 			transform: t3d + '(' + s + 'px, ' + v + 'px, 0)',
 			left: !_GPU ? s : '',
 			top: !_GPU ? v : '',
 			borderColor : colors.RGBLuminance > 0.22 ? dark : light
-		});
+		};
-		_$z_cursor.css({
+		_$z_cursor._css = {
 			transform: t3d + '(0, ' + h + 'px, 0)',
 			top: !_GPU ? h : '',
 			borderColor : 'transparent ' + HUEContrast
-		});
+		};
-		_$alpha.css({backgroundColor: 'rgb(' + RGBInnerText + ')'});
+		_$alpha._css = {backgroundColor: 'rgb(' + RGBInnerText + ')'};
-		_$alpha_cursor.css({
+		_$alpha_cursor._css = {
 			transform: t3d + '(' + a + 'px, 0, 0)',
 			left: !_GPU ? a : '',
 			borderColor : alphaContrast + ' transparent'
-		});
+		};
-		_options.doRender && _$trigger.css({
+		_$trigger._css = {
 			backgroundColor : text,
 			color: colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light
-		});
+		};
+		_$trigger.text = _$trigger.val() !== text ? text : '';
 
-		_$trigger.val() !== text && _$trigger.val(text);
+		toggled !== undefined ? render(toggled) : _animate(render);
+	}
+
+	function render(toggled) {
+		_$xy_slider.css(_$xy_slider._css);
+		_$xy_cursor.css(_$xy_cursor._css);
+		_$z_cursor.css(_$z_cursor._css);
+		_$alpha.css(_$alpha._css);
+		_$alpha_cursor.css(_$alpha_cursor._css);
+
+		_options.doRender && _$trigger.css(_$trigger._css);
+		_$trigger.text && _$trigger.val(_$trigger.text);
 
 		_options.renderCallback.call(
 			_colorPicker,