输入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位置和屏蔽动画方法：

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

这似乎是chrome（不是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