输入滑块向上/向下滑出问题

Question

看起来像是jQuery删除了输入字段的值，这些字段先是向上滑动，然后又向下滑动。我不太确定是不是占位符在做这件事，但是内置的向上/向下滑动似乎是输入字段的bug。

下面是一个示例：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，您将看到缺少输入字段的值。

有没有人知道如何在链接的例子中使用一个向上滑动/向下滑动的工作方法？

使用google chrome，如果这能说明原因的话。

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)中的一个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'));                
        });
    });
});​

Demo

编辑：

我看到上面的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');     
        });
    });
});​

Demo