jQuery slideUp（）/ slideDown（）中的输入字段为空

Question

我有一个包含一些文字的输入字段，我正在尝试切换其可见性。我遇到的问题是，在切换字段上的幻灯片动画后，其文本是不可见的。 当场被聚焦时，文本再次可见。

我在Safari / IE / FF上测试了这一点，输入文字仍然可见，但我无法弄清楚为什么Chrome的行为如此奇怪。

http://jsfiddle.net/f63Et/1/

Answer 1

问题是当jQuery执行inline-block时，jQuery会将输入的显示设置为.slideDown()，这会导致Chrome无法正确呈现。

您有几个选项，例如wrap the input in a div或set the display to block

Answer 2

您可以尝试通过放入slideDown（）的回调来手动对焦：

$(this).focus()

Answer 3

这不能回答Chrome为什么会出现奇怪行为的问题，但是，作为解决方法，如果您将输入包含在div中：

<div id="text"><input type="text" /></div>

然后slideToggle div：

$(document).on('click', '#slide', function() {
    $('#text').slideToggle();
});

这似乎适用于Chrome。

Answer 4

作为变体，您可以使用$('input').toggle('slow')