jQuery sliding animation inside a word

I'm toying around with jQuery/jQuery-ui, and I'd like to do something : say we have a word, when I hover the first letter, I'd like to see a few letters slide in (and out when the mouse goes somewhere else) between the first letter and the rest of the word. So FSecond would become FirstSecond, with "irst" sliding.

I'm almost there, but there's a slight problem : the sliding letters are sliding below the word, and once the sliding is done, they are at the right place. Same thing for the sliding out : the animation itself is not taking place between the first letter and the rest of the word.

Here is the code, quite short : http://pastebin.com/FdTtmV7k. I checked the jquery-ui doc and there's a mention of an options hash to give to the toggle function, but I can't seem to find any doc on this one and what开发者_开发百科 to put in it.

I also noticed a few similar questions left unanswered (see jQuery slideToggle() applies display:block while sliding and https://stackoverflow.com/questions/4090796/jquery-ui-show-moves-elements-during-animation).

Thanks for your time !

This demo should do what you require. The problem exists as jQuery assigns display:block to an element when animating it, which causes your <span> to be rendered as a block-level element.

This happens because the <span> containing the "irst" text will have the CSS display property changed to block when the sliding begins, while the other 2 <span> elements used for "F" and "Second" will keep their default, which is inline.

You can solve this by changing the <span> elements to <div> elements (these are block elements) and additionally apply float: left; CSS style to them.

The new HTML code:

<h3>
    <div id="initial">F</div><div id="middle" style="display: none">irst</div><div id="name">Second</div>
</h3>

And the new CSS code:

#initial, #middle, #name { float: left; }

Adding this CSS fixed it for me. The reasoning is that jQuery wraps your span in a div while animating it, and that div has display:block by default. We take advantage of the fact that they did not set an inline display style on the element and set the class to have display:inline-block.

.ui-effects-wrapper {
    display:inline-block;
}

EDIT: Something was messing up my span tags, no margin modifications are needed.