fix horizontal accordion animation problems

Author: bradrobertson

src/tabs/tabs.js

@@ -94,20 +94,24 @@
 
 	$.tools.tabs.addEffect("horizontal", function(i, done) {
 
+	  var nextPane = this.getPanes().eq(i);
+	  
 		// store original width of a pane into memory
 		w || ( w = this.getPanes().eq(0).width() );
 
-		// set current pane's width to zero
-		this.getCurrentPane().animate({width: 0}, function(){
-		  $(this).hide();
-		});
-		
-    // grow opened pane to it's original width
-    this.getPanes().eq(i).animate({width: w}, function() { 
-     $(this).show();
-     done.call();
-    });
+		nextPane.show(); // hidden by default
 
+		// set current pane's width to zero
+    // animate next pane at the same time for smooth animation
+    this.getCurrentPane().animate({width: 0}, {
+      step: function(now){
+        nextPane.css("width", w-now);
+      },
+      complete: function(){
+        $(this).hide();
+        done.call();
+     }
+    });		
 	});	
 
 
@@ -161,10 +165,10 @@
 				// call the effect
 				effects[conf.effect].call(self, i, function() {
 
+					current = i;
 					// onClick callback
 					e.type = "onClick";
-					trigger.trigger(e, [i]);					
-					current = i;
+					trigger.trigger(e, [i]);
 				});			
 
 				// default behaviour
@@ -254,6 +258,7 @@
 
 		} else {
 			if (conf.initialIndex === 0 || conf.initialIndex > 0) {
+			  current = conf.initialIndex;    // ensure that current is set properly
 				self.click(conf.initialIndex);
 			}
 		}				

test/tabs/accordion-horizontal.htm

@@ -9,7 +9,7 @@
 	<!-- accordion header #1 -->
 	<div class="blok"></div>
 
-	<div class="pane" style="width:200px; display:block">
+	<div class="pane 0" style="width:200px; display:block">
 		<h3>First pane</h3>
 		<p>
 			Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.
@@ -18,7 +18,7 @@ <h3>First pane</h3>
 
 	<div class="blok"></div>
 
-	<div class="pane">
+	<div class="pane 1">
 		<h3>Second pane</h3>
 		<p>
 			Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat. 
@@ -27,7 +27,7 @@ <h3>Second pane</h3>
 
 	<div class="blok"></div>
 
-	<div class="pane">
+	<div class="pane 2">
 		<h3>Third pane</h3>
 		<p>
 			Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.

test/tabs/css/horizontal.css

@@ -27,6 +27,7 @@
 	float:left;	
 	display:none;		
 	margin-right:10px;
+	overflow:hidden;
 }
 
 /* content inside a pane should have fixed width */