这是demo

Question

点击按钮后会发生什么？而不是留在原地，按钮向下移动返回..这是一个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/

Answer 1

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

Answer 2

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

您可以添加：

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

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

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

Answer 4

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

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

在您的特定情况下，您可以将id添加到表单（我使用myForm）并添加以下css规则（用于隔离此ui-effects-wrapper并且不要触及另一个#myForm .ui-effects-wrapper { display: inline-block; }页）：

{{1}}

按下按钮的jQuery .toggle效果

4 个答案:

这是demo