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 位置与屏蔽动画方法一起使用:

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