jQuery UI 抖动效果从新行开始

Posted 2023-03-10

【中文标题】jQuery UI 抖动效果从新行开始

【英文标题】：jQuery UI shake effect starts on new line

【发布时间】：2011-07-25 21:49:51

【问题描述】：

在下面提供的 jsfiddle 链接上，我有一个带有文本的段落，然后是一个输入框。我使用 jQuery UI 来摇动输入框，但奇怪的是摇动效果从文本下方开始。

http://jsfiddle.net/VQj2Z/6/

【问题讨论】：

没有</input>这样的标签。

【参考方案1】：

如果您在效果期间检查源代码，您会看到输入被<div class="ui-effects-wrapper"> 包裹，这就是它折叠到下一行的原因。我不熟悉 mootools，但快速解决方法是将 display:inline 分配给该 div：

<style type="text/css">
    .ui-effects-wrapper 
        display:inline;
    
</style>

【讨论】：

为什么需要熟悉 Mootools？

因为这就是“框架”栏在原始链接中所说的。无论如何，您对浮动 div 的建议更有意义（y）。

我想在没有 hack 的情况下做到这一点。不过，谢谢。

@ThA-B：哦，我明白了...... Mootools 只是 JSFiddle 的默认设置，尽管它没有被使用。他在 html 部分手动包含了 jQuery 和 jQuery UI。

【参考方案2】：

由于没有足够的空间（它被动态包裹在一个 div 中）让 input 在“内联”时晃动，它会换行到下一行并在完成后返回。

将文本和input 放入块级元素（并排浮动div's），一切都保持原位。

http://jsfiddle.net/VQj2Z/10/

还要注意我删除了</input>，因为没有这样的东西。 <input 只是用 /> 关闭

【讨论】：

这涉及到太多改变我以前的工作，还有其他建议吗？

@Randomblue: 问题很简单...... jQuery UI 在对象摇晃之前动态地将对象包含在div 中。 div 不适合“内联”并且将始终换行。我看不到你以前的工作，但我不知道你在不改变整体的情况下还能如何解决这个问题。

【参考方案3】：

对于我的用例，我只是将这些属性添加到包含 div 的类中：

overflow:    visible;
white-space: nowrap;

我认为导致空白环绕的情况可能只有几个像素，那么为什么不让水平溢出稍微过去然后强制它不环绕呢？对于我的用例，这似乎是一种微创方法，因为无论如何文本都应该只在一行上。