1

为什么这个简单的功能：

$(document).ready(function() {
  $('input:not([type="checkbox"], .button, .noanimate)').focus(function() {
    $(this).stop(true, true).animate({
        width: $(this).width() + 50,
    }, 300);
  });

  $('input:not([type="checkbox"], .button, .noanimate)').focusout(function() {
    $(this).stop(true, true).animate({
        width: $(this).width() - 50,
    }, 300);
  });
});

影响这个输入元素：

#search input {
  font-size: 12px;
  width: 300px;
  height: 24px;
  margin: 5px 0 0 0;
  display: block;
  border: 1px solid #003F80;
  background-color: #4682c6;
  color: #F5F5F5;
  box-shadow: inset 0 1px 5px #003F80, 0 1px 3px #73ACE5;
  border-radius: 20px;
  padding: 0 10px 0 10px;
}

在 Firefox 和 Opera 中正常工作，但在 Chrome 中不能正常工作？在以前的浏览器中，当输入处于焦点时，它的宽度会从默认的 300px 扩展到 350px，而当焦点被移除时，会发生相反的情况。

然而，在 Chrome 中，当获得焦点时，它会上升到328px，然后又下降到256px宽度。如果再次给出焦点，它会上升到284px，然后下降到212px等等，直到输入几乎不可见。

它的宽度似乎上升了 28 像素，然后又下降了 72 像素。这里发生了什么？

编辑： 这是一个 JSFiddle，在 Chrome 中显示相同的问题，在 Firefox 和 Opera 中没有问题。

4

2 回答 2

1

改用outerWidth：

http://jsfiddle.net/b7RR6/1/

$(document).ready(function() {
  $('input:not([type="checkbox"], .button, .noanimate)').focus(function() {
    $(this).stop(true, true).animate({
        width: $(this).outerWidth() + 50,
    }, 300);
  });

  $('input:not([type="checkbox"], .button, .noanimate)').focusout(function() {
    $(this).stop(true, true).animate({
        width: $(this).outerWidth() - 50,
    }, 300);
  });
});
于 2013-09-17T01:12:42.700 回答
1

根据 James Montagne 的建议，我type="search从输入中删除了该属性，它工作正常。浏览器在样式上非常不一致。

于 2013-09-22T02:12:28.287 回答