_html/css_WEB-ITnose をクリックすると入力ボックスが増加します

タイトルの通り、クリックすると入力ボックスが大きくなりますが、主な理由は入力ボックスが大きくなる際に入力ボックスの背景画像をスライド処理する必要があるためです。

ディスカッションに返信（解決策）

jqueryを使用する必要があります、

$('#输入框ID').click(function(){  $("#输入框ID").animate({     width: "200px",    height: "50px",     fontSize: "18px",     borderWidth: "2px"  }, 1000 );});//具体数值你根据你自己的要求来

背景画像は同じです

jqueryを使用する必要があります、
JScriptコード

$('#入力ボックスID ').click( function(){ $("#入力ボックスID").animate({
幅: "200px",
高さ: "50px",
fontSize: "18px",
borderWidth: "2px"
}, 1 000 ) });
//特定の値は独自の要件に基づいています...
は正しいです。 。通常、CSS3 はアニメーションをサポートします。 。サポートされていない場合は、JS でのみ記述できます。上記のJSが利用可能です！

cbe460b298883c7f356cf06f11d82f6d
6139445e6344c895bc87843cb8bda8b0 16b28748ea4df4d9c2150843fecfba68


試してみましたが、理由がわかりません

d29400d22487b153b81f3bbd508f529f

59274e529372960d04ab8f7532c34d33
5405df3e690fad038bc23655cabf7012
b2386ffb911b14667cb8f0f91ea547a7nav915fe42c4717bfe53f3a38fd96137f29
e1b007e41ee7275e75e202ca8c98f37a2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
87400f9214b49c2a7b1b00ecb859c37c cf31cb445871286649f3aff4cb162adb140a908a25e23872de34de35eab1c5e6
16b28748ea4df4d9c2150843fecfba68
73a6ac4ed44ffec12cee46588e518a5e

#search{ float:right;padding:9px 0 0;} #search_input{background:url( ../imagegs/01 .png) 繰り返しなし左上;パディング:2px 0 2px 12px;高さ:22px;line-height:22px; float:left;color:#fff;}
.search_button{ float:left; width:37px; height: 26px;background:url(../imagegs/01.png) no-repeat right top;cursor:pointer;}


上記の jquery を search.js

$() に書きました。 ready(function (e) {
var w = $("#search_input").width();
var h = $("#search_input").height();
$("#search_input").focus( function() {

var me = $(this);

var size = 5;
{
width : w+size,
height : h+size
}
}); function() {
$(this).animate(
{
width : w,
height : h }
)
});

クリックして拡大すると、幅はどこで定義されますか?サイズをどれだけ増やすかを定義できます。幅は以前の幅から増加します