javascript - jQuery UI 滑动效果新建一行

Question

我想在我的 Web 应用程序上启用一种效果，用户单击“编辑”图标后，文本框会优雅地立即水平滑出到该图标的右侧。目前它正在滑出，但不是很优雅，因为当我出于某种原因单击该图标时，会在我单击的下方的浏览器中创建一个新行(并且下面的所有内容都被向下移动)。文本框滑出，然后莫名其妙地跳回到我最初希望它去的地方，创建的新行消失了。

但是请注意，如果我将文本框放在自己的行上，使其相对于边距完全左对齐，那么它就可以正常工作。但我想让它滚动到图标的右侧。

此行为对于 IE8 和 Firefox 是相同的。

这是 HTML:

<img src="../images/edit.gif" onclick="toggleNotebox()" style="cursor:pointer"/>
<span id="AddText" style="display:none">
    <input name="AddNoteText" id="TextBox" onkeypress="return addNote(event);" />
</span>

这是相关的 Javascript:

function toggleNotebox() {
    var options = {};
    $('#AddText').toggle('slide', options, 500);
 }

这里是 jsbin.com URL 以查看此行为:http://jsbin.com/alopu/edit

Answer 1

尝试在两个元素上放置一个 float: left。

http://jsbin.com/uzoqo

编辑:出于某种原因，上面的内容有效，但如果您尝试编辑它，它不会显示我对代码所做的更改。不确定发生了什么。