jQuery Horizontal Accordion and animation problem
<p>I need to make a horizontal accordion these days.</p>

<p>You can see that there is a small "jump" of the color boxes on right hand side when clicking the color box. I don't know why the small "jump" occurs.  </p>

<p>I then use animate instead of hide and show to try to solve the problem.  </p>

<p>Even if the width animates to 0px, the element still has a few pixels, so I try to hide it after the animation. But the hide() function doesn't do anything. Why?  </p>

<p>During debugging, I find that the alert("good") runs right before the animation ends. Why?  </p>

<p>Thank you for answering my questions.  </p>

<p>Here is the code:  </p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
.accordion {    padding: 3px; margin: 0px; float: left; width: 300px;}
.accordionTitle {   cursor: pointer; padding: 3px; margin: 0px; float: left;width:20px; height:150px; }
.clearBoth { clear: both; }
&lt;/style&gt;
&lt;script src="jquery-1.3.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" &gt;
$(function() {
    var elementToTransform = ".accordion" 
    $(elementToTransform).hide();
    var currentAccordionPanel = ($(".currentAccordionPanel").show())[0];
    $(".accordionTitle").click(function() {
     if ($(this).next(elementToTransform)[0] != currentAccordionPanel)
      {
       $(currentAccordionPanel).hide(400);
       $(this).next(elementToTransform).show(400);
       /*$(currentAccordionPanel).animate({width:"0px"},{duration:200,queue:false},{},function(){alert("good")});
       $(this).next(elementToTransform).animate({width:"300px"},{duration:200,queue:false});
                      $(currentAccordionPanel).hide(); // the element still has few pixels even width animates to 0, so I hide it
*/
       currentAccordionPanel = $(this).next(elementToTransform)[0];
      }

    })
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div style="width:800px;"&gt;
    &lt;div id="cat1"&gt;
     &lt;div class="accordionTitle" style="background:blue"&gt;1&lt;/div&gt;
     &lt;div class="accordion currentAccordionPanel" id="p1"&gt;content 1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="cat2"&gt;
     &lt;div class="accordionTitle" style="background:red"&gt;2&lt;/div&gt;
     &lt;div class="accordion" id="p2"&gt;content 2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="cat3"&gt;
     &lt;div class="accordionTitle" style="background:yellow"&gt;3&lt;/div&gt;
     &lt;div class="accordion" id="p3"&gt;content 3&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="cat4"&gt;
     &lt;div class="accordionTitle" style="background:green"&gt;4&lt;/div&gt;
     &lt;div class="accordion" id="p4"&gt;content 4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="cat5"&gt;
     &lt;div class="accordionTitle" style="background:red"&gt;5&lt;/div&gt;
     &lt;div class="accordion" id="p5"&gt;content 5&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="clearBoth"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
