Question

我正在使用jquery 1.8.2和toggleSlide动画来流畅地显示搜索输入框但是在chrome上有两个问题 - 其中一个我已分成a jsfiddle

$('#hiddenBlock').slideToggle(500);
$('#inputHiddenBlock').slideToggle(500);
$('#but').slideToggle(500);

在Chrome打开this fiddle并单击按钮 - 在文本框中写入一些文本并再次单击按钮两次 - 一次隐藏第二次再次显示 - 文本现在不可见并保持这种状态直到被f.e刷新。再写一封信。

这也可能与第二个问题有关，它似乎与画布/显示文本有关 - 它允许剪切字母像'l'一半....

在那个例子中，你会看到'l'和't'：
'l' and 't' http://img171.imageshack.us/img171/5784/beztytuuvxq.png

Answer 1

您无需slideToggle文本框和搜索按钮。 div hiddenBlock就足够了。

我简化了你的解决方案：

// on dom ready hides your div
$(document).ready(function(){
  $('#hiddenBlock').hide();
});

 function toggleSearchWindow() {
   $('#hiddenBlock').slideToggle("fast");
 }

 $('input[type=button]').click(function() {
   toggleSearchWindow();
 });

TEST

更新我将输入的文字放在临时变量中以查看是否可以解决您的剪切文字：

<强> TEST2

Answer 2

尝试删除

display:none;

从#inputhiddenblock和#but css然后删除

$('#inputHiddenBlock').slideToggle(500);
$('#but').slideToggle(500);

Answer 3

我已经更新了你的jsfiddle链接。

问题是你没有初始化输入文本字段，而在输入文本字段的dom加载中我们初始化为内联而不显示无。

我评论过它;

$（ '＃inputHiddenBlock'）的slideToggle（500）;

Chrome上的toggleSlide问题 - 剪切字母/不可见文本

3 个答案: