输入效果基本show /了slideDown问题(Input slideUp/slideDown i

好像jQuery的删除已向上滑动，然后再把下来输入字段的值。 如果这是谁做的，但内置的效果基本show /向下似乎错误输入字段占位不太清楚。

这里有一个例子： 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你会看到输入字段的值丢失。

有谁知道一个解决方法，以获得效果基本show /了slideDown在例如工作的联系？
使用谷歌浏览器，如果给出的原因的想法。

Answer 1:

当输入的高度来0.你应该改变你的方法，会发生错误。 使用带有屏蔽动画的方法CSS位置：

这里是演示链接。 你会检查会有这种方法没有错误。

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'));                
        });
    });
});​

演示

编辑：

我看到上面黑客工作仅一次。 如果滑动向上/向下再次失败。

这里有一个更好的黑客。

.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');     
        });
    });
});​

演示

文章来源: Input slideUp/slideDown issue