1. hide() 및 show() 표시 및 숨기기 애니메이션의 경우 표시 및 숨기기는 가장 기본적인 효과 중 하나입니다. 이 섹션에서는 jQuery의 표시 및 숨기기에 대해 간략하게 소개합니다. 코드 복사 코드는 다음과 같습니다. <br> $(function() {<br> $("input:first").click(function() {<br> $("p").hide() //숨기기<br> });<br> $("input:last").click(function() {<br> });<br> });<br> > <input type="button" value="Hide"><br> <input type="button" value="Show"><br> <p>효과를 보려면 버튼을 클릭하세요</p><br> & Lt; div & gt; & lt; em & gt; 맞춤형 애니메이션 등 1. 표시 및 숨기기 hide() 및 show() 애니메이션의 가장 기본적인 효과 중 하나인 표시 및 숨기기는 jQuery의 표시 및 숨기기에 대해 간략하게 소개합니다. </em><br> > <br><br> <br>위는 hide() 및 show() 함수에 대한 테스트입니다. </div> <p>2. show(), hide() 및 Toggle() 메서드를 사용합니다 </p> <p> <strong> </strong>이전 예제에서는 show() 및 hide() 메소드를 간략하게 소개했습니다. 실제로 이 두 메소드는 매개변수를 사용하여 표시 및 숨기기 프로세스를 제어할 수 있습니다. <br> 구문은 다음과 같습니다 </p> <p>표시(기간,[콜백]);<br> hide(기간,[콜백]);</p> 그 중 Duration은 애니메이션 실행 시간의 길이를 나타내며, 느림, 보통, 빠름 등 속도를 나타내는 문자열일 수도 있고, 시간(밀리초)을 나타내는 정수일 수도 있습니다. 콜백은 선택적 콜백 함수입니다. 애니메이션이 완료된 후 실행됩니다. <p> <br><br></p> <p></p> <div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="69766" class="copybut" id="copybut69766" onclick="doCopy('code69766')"><u> 코드는 다음과 같습니다.</u></a></span> <script type="text/javascript"></div> $(function() {<div class="codebody" id="code69766"> $("input:first").click(function() {<br> $("p").hide(300) //숨기기<br> });<br> $("input:last").click(function() {<br> $("p").show(500) //표시<br>; });<br> });<br> > <br><br> <br>hide() 및 show()에 시간 매개변수가 추가된 점을 제외하면 예제는 첫 번째 예제와 동일합니다. 실제로 toogle()은 이벤트 매개변수를 추가할 수도 있습니다. <br> </div>2. fadeIn() 및 fadeOut() 메서드를 사용하세요 <p></p> <p> <strong> 애니메이션 효과의 경우 jQuery는 fadeIn() 및 fadeOut이라는 두 가지 실용적인 방법도 제공합니다. 해당 애니메이션 효과는 페이딩과 유사하며 구문은 Slow() 및 hide()와 완전히 동일합니다. </strong> <br> fadeIn(기간, [콜백]);</p> fadeOut(기간, [콜백]);<p> 예시</p> <p><br><br></p> <p>코드 복사</p> <div class="codetitle"><span><a style="CURSOR: pointer" data="47740" class="copybut" id="copybut47740" onclick="doCopy('code47740')"> 코드는 다음과 같습니다.<u><div class="codebody" id="code47740"> <br> <script type="text/javascript"><br> $(function() {<br> $("input:eq(0)").click(function() {<br> 을 통해 });<br> $("input:eq(1)").click(function() {<br> $("img").fadeIn(1000) // 점차적으로 fadeIn<br> });<br> });<br> "> fadeTo() 메소드 사용. fadeTo() 메서드는 선택한 요소의 불투명도를 지정된 값으로 점진적으로 변경합니다. 예: 코드 복사 코드는 다음과 같습니다. <br> $(function() {<br> $("input:eq(0)").click(function() {<br> $("img").fadeOut(1000);<br> });<br> $("input:eq(1)").click(function() {<br> $("img").fadeIn(1000);<br> });<br> $("input:eq(2)").click(function() {<br> $("img").fadeTo(1000, 0.5);<br> });<br> $("input:eq(3)").click(function() {<br> $("img").fadeTo(1000, 0);<br> });<br> });<br> > ~ <input type="button" value="FadeOut"><br> <input type="button" value="FadeIn"><br> <input type="button" value="FadeTo 0.5"><br> <input type="button" value="FadeTo 0"><br> <br><br> <br> </div>fadeOut 관련 매개변수<p> <strong>속도 </strong> 선택 과목. 요소가 현재 투명도에서 지정된 투명도로 변경되는 속도를 지정합니다. </p> <p>가능한 값: <br> </p>밀리초(예: 1500)<p> "천천히"</p> "보통"<p> "빠르게"<br> 불투명도가 필요합니다. 페이드 인 또는 페이드 아웃할 투명도를 지정합니다. 0.00에서 1.00 사이의 숫자여야 합니다. <br> 콜백 <br> 선택 과목. fadeTo 함수가 실행된 후 실행될 함수입니다. <br> <br>콜백에 대해 자세히 알아보려면 jQuery 콜백 장을 방문하세요. <br> </p>이 매개변수는 속도 매개변수를 설정하지 않으면 설정할 수 없습니다. <p> </p> <p>3. 슬라이드 슬라이드업 및 슬라이드다운 효과 </p> <p> <strong></strong></p> <p></p> <div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="68698" class="copybut" id="copybut68698" onclick="doCopy('code68698')"><u> 코드는 다음과 같습니다.</u><div class="codebody" id="code68698"> <br> <script type="text/javascript"><br> $(함수() {<br> $("입력:eq(0)").click(function() {<br> $("div").add("img").slideUp(1000);<br> });<br> $("입력:eq(1)").click(function() {<br> $("div").add("img").slideDown(1000);<br> });<br> $("입력:eq(2)").click(function() {<br> $("div").add("img").hide(1000);<br> });<br> $("입력:eq(3)").click(function() {<br> $("div").add("img").show(1000);<br> });<br> });<br> </스크립트> <br> <input type="button" value="SlideUp"><br> <input type="button" value="SlideDown"><br> <input type="button" value="Hide"><br> <input type="button" value="Show"><br><br> <div></div><img src="04.jpg"><br> </div> <p>앞쪽 화면에서는 jQuery를 사용하여 SlideUp()과 SlideDown()을 사용하고 있으며 PPT중의 그림은 Slow()와 Hide()와 동일합니다. 。</p> 4.자정义动画<p><strong> </strong>JQuery가 사용할 수 없는 일반적인 사용성, jQuery가 아닌 animate() 방식, 能够使开发者자체 설정.节主要通过介绍animate()방법을 사용하세요两种형式及应사용。</p> <p>animate()방식으로 실행하는 방법은 다음과 같습니다. </p>animate(매개변수,[기간],[완화],[콜백])<p> 其中params는 为希望进行变幻的css属性列表, 以及希望变化到的最终值, 지속 시간, 为可选项, 与show()/hide() 의 参数含义完전체상동등합니다.可选参数，대중적 사용. jQuery는 선형 및 스윙을 사용하여 선형 및 스윙을 구현합니다.callback은 回调函数에서 사용됩니다.</p> <p> 需要注意。params中的变weight遵循camel命名方式。例如paddingLeft는 padding-left가 아닙니다. 🎜> <br>이미지 배경색상이 애니메이션화되지 않습니다.</p> <p></p> <p></p> <p>复主代码</p> <div class="codetitle"><span><a style="CURSOR: pointer" data="50945" class="copybut" id="copybut50945" onclick="doCopy('code50945')"> 代码如下:<u><div class="codebody" id="code50945"> <br> <스타일><br> div {<br> 배경색: #FFFF00;<br> 높이: 40px;<br> 너비: 80px;<br> 테두리: 1px 솔리드 #000000;<br> 여백 상단: 5px;<br> 패딩: 5px;<br> 텍스트 정렬: 중앙;<br> }<br> </스타일><br> <script type="text/javascript"><br> $(함수() {<br> $("버튼").click(function() {<br> $("#block").animate({<br> 불투명도: "0.5",<br> 너비: "80%",<br> 높이: "100px",<br> borderWidth: "5px",<br> 글꼴 크기: "30px",<br> marginTop: "40px",<br> marginLeft: "20px"<br> }, 2000);<br> });<br> });<br> <br> <button id="go">이동>></button><br> <div id="block">动画！</div><br> </div> </u><p>여기params中，jQuery还可以사용“ =”或者"-="来表示상对变化。如</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="77648" class="copybut" id="copybut77648" onclick="doCopy('code77648')"><u>复主代码</u></a></span> 代码如下:</div> <div class="codebody" id="code77648"> <br> <스타일><br> div {<br> 배경색: #FFFF00;<br> 높이: 40px;<br> 너비: 80px;<br> 테두리: 1px 솔리드 #000000;<br> 여백 상단: 5px;<br> 패딩: 5px;<br> 텍스트 정렬: 중앙;<br> 위치: 절대;<br> }<br> </스타일><br> <script type="text/javascript"><br> $(함수() {<br> $("버튼:첫 번째").click(function() {<br> $("#block").animate({<br> 왼쪽: "-=80px" //상对左移<br> }, 300);<br> });<br> $("버튼:마지막").click(function() {<br> $("#block").animate({<br> 왼쪽: " =80px" //상对右移<br> }, 300);<br> });<br> });<br> <br> <버튼 >이동></버튼><br> <버튼 >이동></버튼><br> <div id="block">动画！</div><br> </div> animate()방법이 없습니다. 애니메이션(매개변수,옵션)<p> 其中,params与第一种shape式完全样,options为动画可选参数列表,主要包括duration,esaing,callback,queue等,其中duration.easing.callback与第一种shape式完全一样,queue为布尔值，表示当多个 animate()组成jQuery时，当前animate()紧接这下一个animate(),是按顺序执行(true)还是同时触发false</p> <p>如下例子, 展示了animate()第二种사용법。<br> </p> <p></p> <p></p> <div class="codetitle">复主代码<span><a style="CURSOR: pointer" data="97538" class="copybut" id="copybut97538" onclick="doCopy('code97538')"><u> 代码如下:</u><div class="codebody" id="code97538"> <br> <스타일><br> div {<br> 배경색: #FFFF22;<br> 너비: 100px;<br> 텍스트 정렬: 가운데;<br> 테두리: 2px 단색 #000000;<br> 여백: 3px;<br> 글꼴 크기: 13px;<br> 글꼴 모음: Arial, Helvetica, sans-serif;<br> }<br> 입력 {<br> 테두리: 1px 솔리드 #000033;<br> }<br> > <script type="text/javascript"><br> $(function() {<br> $("input:eq(0)").click(function() {<br> //첫 번째 애니메이트와 두 번째 애니메이트가 동시에 실행되고, 이어서 세 번째 애니메이트가 실행됩니다 <br> $("#block1").animate({<br> 밖으로 }, {<br> 대기열: 거짓,<br> 지속시간: 1500<br> ~ .animate({<br> > }, 1000)<br> .animate({<br> borderRightWidth: "20px"<br> > });<br> $("input:eq(1)").click(function() {<br> //3개의 animate<br>를 순차적으로 실행 $("#block2").animate({<br> 밖으로 > .animate({<br> 글꼴 크기: "24px"<br> }, 1000)<br> .animate({<br> borderRightWidth: "20px"<br> }, 1000);<br> });<br> $("입력:eq(2)").click(function() {<br> $("입력:eq(0)").click();<br> $("입력:eq(1)").click();<br> });<br> $("입력:eq(3)").click(function() {<br> //恢复默认设置<br> $("div").css({<br> 너비: "",<br> 글꼴 크기: "",<br> borderWidth: ""<br> });<br> });<br> });<br> <br> <input type="button" id="go1" value="Block1动画"><br> <input type="button" id="go2" value="Block2动画"><br> <input type="button" id="go3" value="同时动画"><br> <input type="button" id="go4" value="중계"><br> <div id="block1">블록1</div><br> <div id="block2">블록2</div><br> </div> 以上就是本文의 전체 부서 内容了, 希望大家能够喜欢。<p></p></a></span> </div></a></span></div></a></span> </div></a></span></div>
">
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
