动画切换从右向左滑动输入搜索答案

【问题标题】：Animation Toggle Slide right to left input search动画切换从右向左滑动输入搜索
【发布时间】：2012-11-27 17:51:00
【问题描述】：

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

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

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

任何帮助。谢谢

【问题讨论】：

标签： jquery animation toggle slide

【解决方案1】：

据我了解，您的问题是从右向左滑动文本输入。

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/

【讨论】：

【解决方案2】：

我将您的输入字段放在一个 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/

【讨论】：

感谢您的帮助并解决了我的问题。非常感谢 heartcode ;) 这是更新jsfiddle.net/5Gq7L/13