Add update and destroy function, enhance css.

this is the release version!

src/perfect-scrollbar.css

@@ -1,31 +1,60 @@
 .ps-container .ps-scrollbar-x {
-    position: absolute;
-    height: 10px;
-    bottom: 5px;
-    background-color: gray;
+    position: absolute; /* please don't change 'position' */
+    bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x */
+    height: 8px;
+    background-color: #aaa;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    opacity: 0;
+    filter: alpha(opacity = 0);
+    -webkit-transition: opacity.2s linear;
+    -moz-transition: opacity .2s linear;
+    transition: opacity .2s linear;
+}
+
+.ps-container:hover .ps-scrollbar-x {
+    opacity: 0.6;
+    filter: alpha(opacity = 60);
 }
 
 .ps-container .ps-scrollbar-x:hover {
-    background-color: black;
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
     cursor:default;
 }
 
 .ps-container .ps-scrollbar-x.in-scrolling {
-    background-color: black;
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
 }
 
 .ps-container .ps-scrollbar-y {
-    position: absolute;
-    width: 10px;
-    right: 5px;
-    background-color: gray;
+    position: absolute; /* please don't change 'position' */
+    right: 3px; /* there must be 'right' for ps-scrollbar-y */
+    width: 8px;
+    background-color: #aaa;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    opacity: 0;
+    -webkit-transition: opacity.2s linear;
+    -moz-transition: opacity .2s linear;
+    transition: opacity .2s linear;
+}
+
+.ps-container:hover .ps-scrollbar-y {
+    opacity: 0.6;
+    filter: alpha(opacity = 60);
 }
 
 .ps-container .ps-scrollbar-y:hover {
-    background-color: black;
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
     cursor: default;
 }
 
 .ps-container .ps-scrollbar-y.in-scrolling {
-    background-color: black;
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
 }

src/perfect-scrollbar.js

@@ -2,7 +2,21 @@
  * Licensed under the MIT License
  */
 ((function($) {
-    $.fn.perfectScrollbar = function() {
+    $.fn.perfectScrollbar = function(option) {
+        if(option === 'update') {
+            $(this).data('perfect_scrollbar_update')();
+            return;
+        }
+        else if(option === 'destroy') {
+            $(this).data('perfect_scrollbar_destroy')();
+            return;
+        }
+
+        if($(this).data('perfect_scrollbar')) {
+            // if there's already perfect_scrollbar
+            return;
+        }
+
         var $this = $(this).addClass('ps-container'),
             $content = $(this).children(),
             $scrollbar_x = $("<div class='ps-scrollbar-x'></div>").appendTo($this),
@@ -159,11 +173,29 @@
             });
         };
 
+        var destroy = function() {
+            $scrollbar_x.remove();
+            $scrollbar_y.remove();
+            $this.unbind('mousewheel');
+            $(window).unbind('mousemove.perfect-scroll');
+            $(window).unbind('mouseup.perfect-scroll');
+            $this.data('perfect_scrollbar', null);
+            $this.data('perfect_scrollbar_update', null);
+            $this.data('perfect_scrollbar_destroy', null);
+        };
+
+        var initialize = function() {
+            updateBarSizeAndPosition();
+            bindMouseScrollXHandler();
+            bindMouseScrollYHandler();
+            if($this.mousewheel) bindMouseWheelHandler();
+            $this.data('perfect_scrollbar', true);
+            $this.data('perfect_scrollbar_update', updateBarSizeAndPosition);
+            $this.data('perfect_scrollbar_destroy', destroy);
+        };
+
         // initialize
-        updateBarSizeAndPosition();
-        bindMouseScrollXHandler();
-        bindMouseScrollYHandler();
-        if($this.mousewheel) bindMouseWheelHandler();
+        initialize();
 
         return $this;
     };