javascript - 输入 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）。它在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');     
        });
    });
});​

演示