jQuery Animate Toggle - 动画仅适用于第二次点击答案

【问题标题】：jQuery Animate Toggle - Animation only works on second clickjQuery Animate Toggle - 动画仅适用于第二次点击
【发布时间】：2012-10-07 16:41:00
【问题描述】：

任务：我想创建一个简单的分享按钮，它可以扩展到分享部分(F,T,G,P)点击。

我未能让该部分滑出 分享按钮 - 我真正非常想要的 - 但设法让一个单独的 ul 元素滑出右侧。

动画成功了……直到我将ul设置为最初通过$('.networks').hide();隐藏

这些部分旨在仅在单击后显示，但现在在第一次单击后它只是“弹出打开”而忽略了配置的滑出。滑动只在两个方向上起作用（打开和关闭）至少点击一次后。

我上传了一个示例 here at Codepen.io 和一个 jsFiddle。

旁注：演示的行为有点奇怪，因为它们似乎只显示了一个幻灯片效果。我们开始使用的滑出效果总是看起来像弹出一样 - 事实并非如此，它在第二次点击后工作，所以你必须集中注意力才能看到它（在普通浏览器上它可见效果更好）。

PS：如果你帮我把这张幻灯片从“分享”按钮中滑出，可以加分。请注意，我只有基本的 Javascript 知识（* duck and run *）。

【问题讨论】：

【解决方案1】：

看看这个小提琴link。

我将按钮的显示属性更改为 inline-block 而不是 inline。内联显示的元素不能有宽度，我认为这就是 jQuery 无法为元素宽度设置动画的原因。我还在 ul 而不是 ul 周围设置了动画。

编辑：制作了从按钮滑出的东西的快速模型。将一些 css 更改为列表元素本身而不是 a 元素，只需通过 css 工作，我认为它看起来还可以。编辑忘记链接：link

【讨论】：

我还能说什么：完美。非常感谢朋友。整个周末我一直在思考这个问题，无法理解它。我永远不会猜到将 inline 更改为 inline-block 将解决我在尝试时遇到的问题。现在，即使是我正在寻找的滑出功能也可以正常工作（也感谢模型）。