了jQuery，CSS，錯誤的佈局使用顯示

Question

我得到了下面的代碼：Link，正如你可以看到當你在輸入文本區域顯示出來寫的財產以後，問題是之前的效果完成一個小的間隙之間產生提交輸入和textarea的，有趣的是：

當我替換此行：

qCont.show("blind", {to: { display: "block"}}, 1500); 

這一行：

qCont.css("display", "block"); 

問題解決了，但我確實希望這種效果有辦法解決它並使用「顯示」效果，謝謝大家，祝你有美好的一天。

Answer 1

好吧。有一個5px的底部邊距被應用到textarea。

這是一個黑客，但我解決了這個通過添加以下的CSS：

#qContent 
{ 
    margin-bottom: -5px !important; 
} 

這裏的小提琴： http://jsfiddle.net/CWP8E/3/

作爲替代方案，你可以添加運行後顯示一個匿名函數效果動畫。這也修復了外觀（和我喜歡多一點）：

qTitle.one("keydown" ,function(){ 
     qCont.show("blind", {to: { display: "block"}}, 1500, function() { 
      $(this).css("display","block"); 
     }); 
    }); 

下面是這個小提琴：http://jsfiddle.net/CWP8E/4/

我還在尋找到爲什麼被插入的5px的保證金（東西jQquery ？），但上面的黑客修復了視覺效果。我明白這是一種黑客攻擊，但有時會讓我們繼續前進。

當我們瀏覽代碼時，我注意到jQuery動畫的結尾是qTitle的值爲display: inline-block，而不是display: block，如預期的那樣。在Google上快速搜索可以推薦第二個解決方案（使用匿名完成功能）。

下面是描述它的StackOverflow文章：

jQuery fadeIn() results in display: block for inline element

Answer 2

嘗試

qCont.show("blind", {direction:"vertical"}, 1500);