slideUp 和 slideDown 的意外行为答案

【问题标题】：Unexpected behavior of slideUp and slideDownslideUp 和 slideDown 的意外行为
【发布时间】：2013-03-23 23:05:22
【问题描述】：

要了解我的问题，请访问this link。这里注意文本框和按钮是相互对齐的，但是当你点击 SlideUp 按钮然后 SlideDown 他们的对齐被打乱了

这是我的代码

$(document).ready(function(){
  $("#btSlideDown").click(function(){
    $("#txt").slideDown("slow");
    $("#b2").slideDown("slow");
  });
  $("#btSlideUp").click(function(){
    $("#txt").slideUp("slow");
    $("#b2").slideUp("slow");
  });
});

请解释为什么会这样？

【问题讨论】：

你链接的小提琴什么都不做。在 Chrome 中尝试过。控制台没有错误，只是什么都不做。
@FrançoisWahl - 将加载从 head 更改为 onload。
@j08691: 试过了，但什么都做不了，可能会重新启动 Chrome 有点奇怪。
我更新了小提琴链接。
@j08691：是的，我现在明白了，我一定是搞砸了。谢谢。

标签： jquery slidedown slideup

【解决方案1】：

如果你在 CSS 中添加垂直对齐样式，它似乎可以解决问题，类似于：

#panel > input{
    vertical-align: middle;
}

DEMO - 应用垂直对齐

我的猜测是，浏览器正在尝试尽可能地自行确定对齐方式，并且由于输入是单独的元素，因此它不能完全正确。

通过指定vertical-align，尽管您是在告诉浏览器您想要它的方式，这样浏览器就不必猜测了。我只是在猜测。

【讨论】：

【解决方案2】：

我尚未确定导致该问题的原因，但我确实有替代解决方案：

尝试将这些元素包装在 div 中并在包装器上调用 slideDown 或 slideUp。

<div id="panel">
    <div id='wrapper'>
        <input id="txt" type="text" />
        <input id="b2" type="button" value="OK"/>
    </div>
</div>

$(document).ready(function(){
    $("#btSlideDown").click(function(){
        $("#wrapper").slideDown('slow');
    });
    $("#btSlideUp").click(function(){
        $("#wrapper").slideUp('slow');
    });
});

Fiddle

【讨论】：

感谢您的回复。但是我知道这种包装方式，但我想知道为什么会出现这种意外行为。
slideUp 和 slideDown 似乎不适用于 buttons：jsfiddle.net/ethagnawl/xLjvw/1