【问题标题】：jQuery .toggle effect pushing down buttonjQuery .toggle 效果按下按钮
【发布时间】：2014-02-27 10:48:35
【问题描述】：

当我点击按钮时会发生什么？为了保持原位，按钮向下移动并返回到.. 这是一个 HTML、CSS 和 jQuery 代码...这个想法是当我单击按钮时，搜索表单向左移动。当我再次单击该按钮时，搜索表单会向后移动。

HTML

<form action="" class="search">
        <input type="text" placeholder="Search" class="input" />
        <input type="button" value="click me"/>
</form>

CSS

input[type="text"]
{
    display: none;
    width: 254px;
    height: 63px;
    border: none;
    font-size: 30px;
    font-family: SourceSansPro, sans-serif;
    color: gray;
}
input[type="button"]
{
    position: relative;
    float: right;
    left: -10px;
    border: none;
    width: 63px;
    height: 63px;
    padding: 0;
}

jQuery

 $('input[type=button]').click(function () {

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: 'right' };

    // Set the duration (default: 400 milliseconds)
    var duration = 700;

    $('input[type=text]').toggle(effect, options, duration);
});

http://jsfiddle.net/GagK9/2/

【问题讨论】：

标签： jquery forms button toggle

【解决方案1】：

添加position : fixed; 在 input [type=text] 的 css 中，那么它将在那个地方保持不变。

【讨论】：

【解决方案2】：

toggle() 用div.ui-effects-wrapper 包装它使用的元素。

您可以将display:inline-block 添加到此生成的div 以避免将button 移动到底部。

在您的特定情况下，您可以将id 添加到表单中（我使用myForm）并添加以下css 规则（用于隔离此ui-effects-wrapper 并且不要触摸页面上的其他内容）：

#myForm .ui-effects-wrapper {
    display: inline-block;
}

这里是demo

【讨论】：

【解决方案3】：

在input 元素周围添加一个包装器，并为其设置动画：

<form action="" class="search">
   <div id="textinput"><input type="text" placeholder="Search" class="input" /></div>
    <input type="button" value="click me"/>
</form>

http://jsfiddle.net/mblase75/zdFU9/

【讨论】：

【解决方案4】：

如果您使用 Firebug 检查button 元素，您会看到当效果发生变化时，input 元素变成了div 元素。这就是按钮向下移动的原因，因为div 填充了整个宽度。

您可以添加：

.ui-effects-wrapper {
    float:left !important;
}

到您的 CSS：http://jsfiddle.net/GagK9/7/

【讨论】：

这是另一种解决方案。