我正在玩jQuery / jQuery-ui，我想做点什么：说我们有一个词，当我把第一个字母悬停时，我想看到几个字母滑入（和当鼠标移到其他地方时，在第一个字母和其余单词之间。所以FSecond将成为FirstSecond，“irst”滑动。
我差不多了，但是有一个小问题：滑动字母在单词下滑动，一旦完成滑动，它们就在正确的位置。滑出同样的事情：动画本身并不是在第一个字母和其余部分之间发生的。
以下是代码，非常简短：http://pastebin.com/FdTtmV7k。我检查了jquery-ui doc并提到了toggle函数的一个选项哈希，但是我似乎找不到任何关于这个的文档以及放入它的内容。
我还注意到一些类似的问题没有得到答复（请参阅jQuery slideToggle() applies display:block while sliding和https://stackoverflow.com/questions/4090796/jquery-ui-show-moves-elements-during-animation）。
谢谢你的时间！
答案 0 :(得分：3)
This demo应该做你需要的。问题存在，因为jQuery在动画时将display:block分配给元素，这会导致<span>呈现为block-level element。
答案 1 :(得分：2)
这是因为包含<span>文本的"irst"会在滑动开始时将CSS display属性更改为block，而另外2 <span>用于"F"和"Second"的元素将保留默认值，即内联。
您可以通过将<span>元素更改为<div>元素（这些是块元素）并另外将float: left; CSS样式应用于它们来解决此问题。
新的HTML代码：
<h3>
<div id="initial">F</div><div id="middle" style="display: none">irst</div><div id="name">Second</div>
</h3>
新的CSS代码：
#initial, #middle, #name { float: left; }
答案 2 :(得分：0)
添加此CSS为我修复了它。原因是jQuery在span动画时将div包裹在div中，默认情况下display:block有display。我们利用了这样一个事实：他们没有在元素上设置内联display:inline-block样式，并将类设置为.ui-effects-wrapper {
display:inline-block;
}
。
span编辑：有些东西搞砸了我的{{1}}标签，不需要修改边距。