slideUp和slideDown的意外行为

要了解我的问题，请访问this link。这里需要注意的文本框和按钮都彼此对齐，但是当你点击效果基本show按钮，然后他们了slideDown对准得到打乱slideUp和slideDown的意外行为

这里是我的代码

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

请解释为什么发生这种情况？

来源

2013-03-23 user1390378

你连接的小提琴什么都不做。在Chrome中试用过。控制台没有错误，只是没有做任何事情。 – Nope 2013-03-23 23:11:51

@FrançoisWahl - 将装载从头部更改为装载。 – j08691 2013-03-23 23:13:20

@ j08691：试过了，但无法做任何事情，可能会重新启动Chrome，这有点奇怪。 – Nope 2013-03-23 23:29:06

如果添加一个垂直对齐方式，以你的CSS似乎解决此问题，与此类似：

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

DEMO - 应用垂直对齐

我的猜测是，浏览器正试图尽可能最佳地确定对齐方式，并且由于输入是独立的元素，所以它不能完全正确地进行对齐。

通过指定vertical-align，虽然你告诉浏览器你想如何，所以浏览器不必猜测。我只是猜测当然。

来源

2013-03-23 23:36:09 Nope

我还没有确定是什么导致了这个问题，但我有一个替代的解决方案：

尝试包裹这些元素在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

来源

2013-03-23 23:17:20 pdoherty926

感谢您的回复。但我知道这种包装的方式，但我想知道为什么这种意想不到的行为。 – user1390378 2013-03-23 23:20:26

'slideUp'和'slideDown'似乎不适用于'button's：http://jsfiddle.net/ethagnawl/xLjvw/1/ – pdoherty926 2013-03-23 23:28:01

slideUp和slideDown的意外行为

回答

相关问题