輸入slideUp/slideDown問題

Question

似乎像jQuery刪除已經上滑，然後下滑輸入字段的值。不太確定它是否是佔位符，但是內置的slideUp/Down似乎是錯誤的輸入字段。

這裏有一個例子：http://jsfiddle.net/k3Bc2/

$(document).ready(function() { 
    $('#slideUp').click(function() { 
     $('input[type="text"]').slideUp(1000); 
    }); 

    $('#slideDown').click(function() { 
     $('input[type="text"]').slideDown(1000); 
    }); 
}); 

如果輸入的輸入字段中的值，然後單擊效果基本show按鈕，等待，直到它的滑動起來，然後點擊了slideDown，你會看到的價值輸入字段丟失。

有誰知道一個解決辦法來得到一個slideUp/slideDown工作的示例鏈接？
使用谷歌瀏覽器，如果這給出了原因的想法。

Answer 1

輸入高度爲0時發生錯誤。您應該更改您的方法。使用CSS位置與蒙動畫的方法：

Here is demo link. You'll inspect there will be no bug with this method.

的jQuery：

$(document).ready(function() { 
    $('#slideUp').click(function() { 
     $('input[type="text"]').stop().animate({'top':'200px'},400); 
    }); 

    $('#slideDown').click(function() { 
     $('input[type="text"]').stop().animate({'top':'0px'},400); 
    }); 
});​ 

HTML：

<div id="mask"> 
    <input id="motion" type="text" value="" placeholder="Enter some text.." /> 
</div> 
<input type="button" value="slideUp" id="slideUp" /> 
<input type="button" value="slideDown" id="slideDown" />​ 

CSS：

#mask { position:relative; 160px; height:25px; overflow:hidden; top:0; left:0; } 
#motion { position:absolute; top:0; left:0; } 
input { position:relative; } ​ 

Answer 2

這似乎是一個錯誤我ñ鉻（不是jQuery）。它在ff中工作正常。

它與font-size有關，我想。 Chrome不會丟失font-size，但是如果您再次設置，則它可以正常工作。

$(document).ready(function() { 
    $('#slideUp').click(function() { 
     $('input[type="text"]').slideUp(1000); 
    }); 

    $('#slideDown').click(function() { 
     $('input[type="text"]').slideDown(1000,function(){ 
      $(this).css('font-size',$(this).css('font-size'));     
     }); 
    }); 
});​ 

Demo

編輯：

我看到上面黑客工作僅一次。如果再次向上/向下滑動，則會失敗。

這裏有一個更好的黑客。

.text{ 
    font-size:13px; 
}​ 

$(document).ready(function() { 
    $('#slideUp').click(function() { 
     $('input[type="text"]').slideUp(1000,function(){ 
       $(this).removeClass('text');   
     }); 
    }); 

    $('#slideDown').click(function() { 
     $('input[type="text"]').slideDown(1000,function(){  
      $(this).addClass('text');  
     }); 
    }); 
});​ 

Demo