Question

我想在我的网络应用中启用效果，用户点击“编辑”图标，文本框优雅地水平滑动到图标右侧。目前它正在滑出，但不是很优雅，因为当我点击图标由于某种原因在我点击的下面的浏览器中创建了一个新行（并且下面的所有内容都被降低了）。文本框滑出，然后奇怪地跳回到我原本想要去的地方，并且创建的新行消失。

但请注意，如果我将文本框放在自己的行上，使其完全左对齐边距，那就可以了。但是我希望它将它滚动到图标的右侧。

此行为与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网址：http://jsbin.com/alopu/edit

Answer 1

尝试在两个元素上放置一个浮点数：

http://jsbin.com/uzoqo

编辑：出于某种原因，上述方法有效，但如果您尝试编辑它，则不会显示我对代码的更改。不确定发生了什么。

Answer 2

默认情况下，内联元素（跨度和输入）不支持显式宽度。因此，jQuery要么将动画元素的显示更改为阻止，要么将其包装在块元素中，以便可以对该元素进行动画处理。

这就是撒母耳改变的原因 - 浮动元素的荣誉宽度。

JQuery UI幻灯片效果创建一个新行

2 个答案: