이 기사의 예에서는 마우스 애니메이션 효과를 기반으로 자동으로 확장되는 입력 상자의 jQuery 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. jQuery는 마우스 감지 애니메이션 효과로 자동 확장되는 입력 상자를 구현합니다 <br> 몸<br> {<br> 여백:0; 글꼴 크기:12px;<br> }<br> a:링크 {<br> 색상:#1553a9; 텍스트 장식: 없음;<br> }<br> a:방문했어요 {<br> 텍스트 장식:없음; 색상: #1553a9;<br> }<br> a:호버 {<br> 텍스트 장식:없음; 색상: #f46662;<br> }<br> a:활성 {<br> 텍스트 장식: 없음; 색상:#f46662;<br> }<br> #메인<br> {<br> 너비:500px; 여백:0 자동; 여백:100px;<br> } <p>#드<br> {<br> 디스플레이:블록;폭:100px; 라인 높이:30px; 테두리:#b7b7b7 1px 패딩-왼쪽:0;<br> }<br> #가다<br> {<br> 너비:30px; 부동:오른쪽;높이:22px; 1px 테두리-왼쪽:10px; 배경색:#464646; #FFFFFF;<br> }<br> </스타일><br> <script type="text/javascript"><br> $(함수(){</p> <p>$("#de").mouseover(function(){<br> $("#de").animate({"width":"250px"});<br> }).mouseout(함수(){<br> $("#de").animate({"width":"100px"});<br> });<br> });<br> <br> </머리><br> <br> <div id="main"><br> <div id="ss"><div id="go">→</div><input type="text" id="de"/></div><br> </div><br> </본문><br> </p> </div>
