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

James Montagne の提案に従ってtype="search、入力から属性を削除したところ、問題なく動作しました。ブラウザーは、それらをスタイリングする際に非常に一貫性がありません。

于 2013-09-22T02:12:28.287 に答える
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 に答える