jquery - 动画切换 从右向左滑动输入搜索

Question

我在这里做了一些事情，我只是想让输入从右向左滑动。

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

我使用简单的代码来显示和隐藏输入字段，

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

任何帮助。谢谢

Answer 1

我将您的输入字段放在一个 div 中，并将链接和包装器 div 的浮动设置为左侧：

<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/