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を置く：両方の要素に左。

http://jsbin.com/uzoqo

編集：何らかの理由で上記の作品のためにしかし、あなたはそれを編集しようとする場合、それは、コードへの私の変更を表示しません。何が起こったのか分からない。

Answer 2

デフォルトでは、範囲と入力はインライン要素であり、明示的な幅は使用されません。したがって、jQueryはアニメーション要素の表示をブロックに変更するか、ブロック要素にラッピングして、その要素をアニメーション化することができます。

だからこそ、サムエルの変化が働いています。浮遊した要素は幅を尊重しています。