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的意外行爲

回答

相關問題