jQuery animate glitch when using width: "hide" + width: "show"

I've been fiddling with this problem for some time now and can't figure out if it's my code or jQuery that's bugged.

I am doing two simultaneous .animate() on two different lists (A and B) that's both floated left, which aims to collapse A and expand B like this:

$('elementA').animate({width: "hide", opacity: 0});
$('elementB').animate({width: "show", opacity: 1});

It is used to sub开发者_StackOverflow中文版menu's in a horizontal menu bar that's supposed to pop-out when the parent topmenu item is clicked. The problem is that it seems to "glitch" right after the specified element has been collapsed and thus creating an ugly 1ms full width rendering before really hiding itself. Problem has been verified in Google Chrome and Firefox (probably also in Safari).

Have a look at the sandboxed example on jsfiddle here: http://jsfiddle.net/XehBN/

Note that some code might seem too excessive, but is there to take multiple list items into account etc.

Where's the problem? Thanks in advance guys

Edit, clarification:

The reason for using "hide" and "show" instead of hardcoded units in pixels, is that I can't foresee the total width of the elements as there can be multiple menu list items with different text length. If it's the jQuery automagic that produces the glitch, perhaps it's possible to retrieve the generated width through jQuery, save it in a variable and then use it later again?

I took the liberty of setting up another jsfiddle example. What I have done there is animate the closing submenu to 1px and then removed the style attribute (so it inherits the default styles again).

Because it is only 1px the and the fade effect is complete the slight jump isn't really noticeable.

Please note that I have only tested this on Chrome - I am not certain of performance on other browsers.

Hopefully that gives you something to work with!