输入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);
    });
});

如果在输入字段中输入一个值并单击slideUp按钮并等到它滑动，然后单击slideDown，您将看到缺少输入字段的值。

有没有人知道一个解决方法，以获得一个slideUp / 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

这似乎是chrome（而不是jQuery）中的一个bug。 它在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'));                
        });
    });
});​

演示

编辑：

我看到上面的hack只工作了一次。 如果再次向上/向下滑动，则会失败。

这是一个更好的黑客。

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

演示