Centred jQuery accordion (with its width calculated with jQuery) displays weird behaviours!
<p>All Images are 320px. </p>

<p>The width of their container (a anchor tag) is set to <code>78px</code> by default.</p>

<p>When you hover one anchor tag it is expanded to <code>310px</code>.</p>

<p>I wanted to center them so I did: <code>margin: 0 auto</code> to <code>#accordion ul</code>.</p>

<p>In order to center it, I couldn't give a fixed width to <code>#accordion ul</code>. So I dynamically calculated its width with jQuery.</p>

<p>But when you hover an anchor tag the total width changes (one image will expand to 310px).
So I have to do <code>310-78px</code> (not sure if my math is right).</p>

<p>It works but </p>

<ol>
<li>When I hover the last image I get some weird behaviour.</li>
<li><code>#accordion ul</code> is not centred until you hover it (should be centred by default).</li>
</ol>

<p>You can check it here: <a href="http://alexchen.info/brianfunshine/" rel="nofollow">http://alexchen.info/brianfunshine/</a></p>

<p>Any suggestions? </p>

<p>js:</p>

<pre><code>var $j = jQuery.noConflict();

$j(document).ready(function() {
    /**
     * jQuery Accordion
     */
    $j('#accordion ul li a').hover(function() {
        // if the element is currently being animated (to a easeOut)...
        if ($j(this).is(':animated')) {
            $j(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad"});
        } else {
        // ease in quickly
            $j(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad"});
        }
        }, function () {
        // on hovering out, ease the element out
        if ($j(this).is(':animated')) {
            $j(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad"})
        } else {
        // ease out slowly
        $j(this).stop('animated:').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad"});
        }
    });
    /**
     *  Calculate the size of all the images inside the Jquery Accordion
     */
    var customWidth = $j('#accordion ul li a').outerWidth(true);
    var customNumber = $j('#accordion ul li a').size();
    // add extra 78px if it is hovered
    $j('#accordion ul li a').hover(function () {
        $j('#accordion ul').css('width', (customWidth*customNumber+242) + 'px');
      }, function () {
        var cssObj = {
          'width' : customWidth*customNumber,
        }
        $j('#accordion ul').css(cssObj);
    });
});
</code></pre>

<p>html:</p>

<pre><code>    &lt;div id="accordion"&gt;
        &lt;ul&gt;
            &lt;?php // Create and run custom loop
                $custom_posts = new WP_Query();
                $custom_posts-&gt;query('post_type=page_content&amp;page_sections=Slider (Front Page)');
                while ($custom_posts-&gt;have_posts()) : $custom_posts-&gt;the_post();
            ?&gt;
            &lt;li class="landscapes"&gt;&lt;?php the_content(); ?&gt;&lt;&gt;&lt;/li&gt;
            &lt;?php endwhile; ?&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
</code></pre>
