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

Question

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

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

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

这可能也与第二个问题有关，它似乎与 Canvas /显示文本有关 - 它允许将字母“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