Animated panels

2 files changed, 15 insertions, 8 deletions

diff --git a/debug_toolbar/media/debug_toolbar/toolbar.css b/debug_toolbar/media/debug_toolbar/toolbar.css
index f55a1d8..44a9074 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.css
+++ b/debug_toolbar/media/debug_toolbar/toolbar.css
@@ -80,8 +80,7 @@
 	background-repeat:no-repeat;
 	background-position:left center;
 	background-color:#333;
-	padding-left:10px;
-	
+	padding-left:10px;	
 }
 
 #djDebugToolbar li.active a:hover {
@@ -147,9 +146,9 @@
 	position:fixed;
 	margin:0;
 	top:0;
-	right:200px;
+	right:150px;
 	bottom:0;
-	left:0;
+	left:50px;
 	background-color:#eee;
 	color:#666;
 	z-index:1000000;
diff --git a/debug_toolbar/media/debug_toolbar/toolbar.js b/debug_toolbar/media/debug_toolbar/toolbar.js
index b20a487..f1e6a94 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.js
+++ b/debug_toolbar/media/debug_toolbar/toolbar.js
@@ -12,12 +12,16 @@ jQuery(function($j) {
 					return false;
 				}
 				current = $j('#djDebug #' + this.className);
+				$j(document).trigger('close.djDebug');
 				if (current.is(':visible')) {
-					$j(document).trigger('close.djDebug');
 					$j(this).parent().removeClass("active");
 				} else {
 					$j('.panelContent').hide();
-					current.show();
+					current.animate({
+					    right:"200px",
+					    left:"0px",
+					    opacity:"show"
+					},200);
 					$j.djDebug.open();
 					$j('#djDebugToolbar li').removeClass("active");
 					$j(this).parent().addClass("active");
@@ -79,9 +83,9 @@ jQuery(function($j) {
 			return false;
 		},
 		hide_toolbar: function(setCookie) {
+		    $j(document).trigger('close.djDebug');
 			$j('#djDebugToolbar').hide("fast");
 			$j('#djDebugToolbar li').removeClass("active");
-			$j(document).trigger('close.djDebug');
 			$j('#djDebugToolbarHandle').show();
 			if (setCookie) {
 				$j.cookie(COOKIE_NAME, 'hide', {
@@ -101,7 +105,11 @@ jQuery(function($j) {
 	});
 	$j(document).bind('close.djDebug', function() {
 		$j(document).unbind('keydown.djDebug');
-		$j('.panelContent').hide();
+		$j('.panelContent').animate({
+		    right:"150px",
+		    left:"50px",
+		    opacity:"hide"
+		}, 150);
 		$j('#djDebugToolbar li').removeClass("active");
 	});
 });