jquery - アニメーションの切り替え右から左へのスライド入力検索

Question

私はここで何かをしました、そして私はちょうど入力を右から左にスライドさせるのが好きです。

http://jsfiddle.net/5Gq7L/5/

簡単なコードを使用して、入力フィールドを表示および非表示にしました。

   $("#edit-search-block-form--2").animate({width:'toggle'},500);

どんな助けでも。ありがとう

Answer 1

入力フィールドをdivに配置し、リンクとラッパーdivの両方のfloatを左に設定しました。

<div id="input_wrapper">
  <input type="text" id="search2" name="search_block_form" value="" size="30" maxlength="128" >
</div>

これにより、divは左から右に移動します。

更新されたフィドルは次のとおりです：http： //jsfiddle.net/robertp/5Gq7L/10/

Answer 2

私が理解したように、あなたの質問はテキスト入力を右から左にスライドさせることです。

jQueryは要素を左また​​は右からスライドすることを提供していません。そのため、jQueryが提供するanimateメソッドを使用してこれを実現できます。

これは私がこれを実装した方法です：

$("#showhide").toggle(function() {
$("#search2").animate({'margin': '-=100px'}, 500);
      $(this).toggleClass("closed");
}, function() {
$("#search2").animate({'margin': '+=100px'}, 500);
      $(this).toggleClass("closed");
});

ここでフィドルを確認できます：

http://jsfiddle.net/5Gq7L/11/