一个单词里面的jQuery滑动动画答案

【问题标题】：jQuery sliding animation inside a word一个单词里面的jQuery滑动动画
【发布时间】：2011-06-29 12:34:11
【问题描述】：

我正在玩弄 jQuery/jQuery-ui，我想做一些事情：假设我们有一个单词，当我悬停第一个字母时，我希望看到一些字母滑入（并且当鼠标移到其他地方时退出）在第一个字母和单词的其余部分之间。所以 FSecond 将变为 FirstSecond，并带有“第一个”滑动。

我快到了，但有一个小问题：滑动字母在单词下方滑动，一旦滑动完成，它们就在正确的位置。滑出也是一样：动画本身不会发生在第一个字母和单词的其余部分之间。

这是代码，很短：http://pastebin.com/FdTtmV7k。我检查了 jquery-ui 文档，其中提到了一个选项散列以提供给切换功能，但我似乎无法在这个文档上找到任何文档以及在其中放入什么。

我还注意到一些类似的问题没有得到解答（请参阅 jQuery slideToggle() applies display:block while sliding 和 https://stackoverflow.com/questions/4090796/jquery-ui-show-moves-elements-during-animation）。

感谢您的宝贵时间！

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

This demo 应该满足您的要求。问题的存在是因为 jQuery 在为元素设置动画时将 display:block 分配给元素，这会导致您的 <span> 呈现为 block-level element。

【讨论】：

问题是 jQuery 在设置动画时会将您的元素包装在 div 中，而不是指定 display:block。在调试器中查看
@josh.trow 我的演示不使用 jQueryUI。我不确定它如何添加ui-effects-wrapper。我完全接受这可能会发生，但我现在看不到！编辑抱歉，在查找此内容时未加载 jQueryUI。我看到它在使用 jQueryUI 时被包裹在 <div> 中，但我的演示不需要它。
抱歉，我并没有真正查看您的源代码，我只是在处理我从 Katen 提供的 pastebin 代码中看到的内容。我确实看到你的工作正常。
抱歉更新晚了。这正是我想要的工作方式，非常感谢！
没问题！乐于助人:-)

【解决方案2】：

发生这种情况是因为包含"irst" 文本的<span> 将在滑动开始时将CSS display 属性更改为block，而其他2 个<span> 元素用于"F" 和@987654327 @ 将保留其默认值，即内联。

您可以通过将<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; }

【讨论】：

您也可以保留当前的<span> 元素，并在它们上应用display: block; 属性...这取决于您。
如果您查看调试器工具，它实际上将元素（跨度标记）临时包装在 div 中，类为 ui-effects-wrapper
@josh.trow 是的，你是对的。刚刚检查了一下，看起来span 正在获得inline 显示样式。

【解决方案3】：

添加这个 CSS 为我修复了它。原因是 jQuery 将您的 span 包装在 div 中，同时对其进行动画处理，并且 div 默认具有 display:block。我们利用了他们没有在元素上设置内联 display 样式并将类设置为具有 display:inline-block 的事实。

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

编辑：我的span 标签搞砸了，不需要修改边距。

【讨论】：