비동기식 외에
jquery에서 가장 많이 사용해야 하는 것은 애니메이션과 특수 효과입니다. 사용자에게 더 나은 경험을 제공하려면 jquery가 최선의 선택입니다. jquery의 애니메이션을 살펴보겠습니다. 특수효과 설명!
1. 표시 및 숨기기 hide() 및 show()
애니메이션에서 표시 및 숨기기는 jQuery의 표시 및 숨기기에 대해 간략하게 소개합니다.
<script type="text/javascript"> $(function() { $("input:first").click(function() { $("p").hide(); //隐藏 }); $("input:last").click(function() { $("p").show(); //显示 }); }); </script> <input type="button" value="Hide"> <input type="button" value="Show"> <p>点击按钮,看看效果</p> <div><em>本节主要降级和学习jQuery的自动显隐,渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏。</em> </div>
위는 hide(), show() 함수에 대한 테스트입니다.
2. show(), hide() 및 전환() 메소드를 사용하세요
이전 예제에서는 show() 및 hide() 메소드를 간략하게 소개했습니다. 실제로 이 두 메소드는 매개변수 제어를 허용합니다. 표시 및 숨기기 프로세스.
구문은 다음과 같습니다
show(duration,[callback]); hide(duration,[callback]);
그 중 지속 시간은 애니메이션 실행 시간을 나타내며, 느림, 보통, 빠름 등 속도를 나타내는 문자열일 수도 있고 시간(밀리초)을 나타내는 정수일 수도 있습니다. 콜백은 선택적인 콜백 함수입니다. 애니메이션이 완료된 후 실행됩니다.
<script type="text/javascript"> $(function() { $("input:first").click(function() { $("p").hide(300); //隐藏 }); $("input:last").click(function() { $("p").show(500); //显示 }); }); </script>
hide() 및 show()에 시간 매개변수가 추가된 점만 제외하면 예제는 첫 번째 예제와 동일합니다. 실제로 toogle()은 이벤트 매개변수를 추가할 수도 있습니다.
3. fadeIn() 및 fadeOut() 메서드 사용
jQuery는 또한 fadeIn() 및 fadeOut이라는 두 가지 실용적인 메서드를 제공합니다. 느림()과 숨김().
fadeIn(duration, [callback]); fadeOut(duration, [callback]);
예
<script type="text/javascript"> $(function() { $("input:eq(0)").click(function() { $("img").fadeOut(3000); //逐渐fadeOut }); $("input:eq(1)").click(function() { $("img").fadeIn(1000); //逐渐fadeIn }); }); </script> <img src="/uploads/allimg/150204/225Q14038-0.jpg"> <input type="button" value="Hide"> <input type="button" value="Show">
fadeTo() 메소드 사용법.
fadeTo() 메서드는 선택한 요소의 불투명도를 지정된 값으로 점진적으로 변경합니다.
예:
<script type="text/javascript"> $(function() { $("input:eq(0)").click(function() { $("img").fadeOut(1000); }); $("input:eq(1)").click(function() { $("img").fadeIn(1000); }); $("input:eq(2)").click(function() { $("img").fadeTo(1000, 0.5); }); $("input:eq(3)").click(function() { $("img").fadeTo(1000, 0); }); }); </script> <p><img src="03.jpg"></p> <input type="button" value="FadeOut"> <input type="button" value="FadeIn"> <input type="button" value="FadeTo 0.5"> <input type="button" value="FadeTo 0">
fadeOut 관련 매개변수
속도
선택 사항. 요소가 현재 투명도에서 지정된 투명도로 변경되는 속도를 지정합니다.
가능한 값:
밀리초(예: 1500)
"slow"
"normal"
"fast"
opacity 필수입니다. 페이드 인 또는 페이드 아웃할 투명도를 지정합니다. 0.00에서 1.00 사이의 숫자여야 합니다.
콜백
선택사항. fadeTo 함수가 실행된 후 실행될 함수입니다.
콜백에 대해 자세히 알아보려면 jQuery 콜백 장을 방문하세요.
이 매개변수는 속도 매개변수를 설정하지 않으면 설정할 수 없습니다.
4. 슬라이드 SlideUp 및 SlideDown 효과
<script type="text/javascript"> $(function() { $("input:eq(0)").click(function() { $("div").add("img").slideUp(1000); }); $("input:eq(1)").click(function() { $("div").add("img").slideDown(1000); }); $("input:eq(2)").click(function() { $("div").add("img").hide(1000); }); $("input:eq(3)").click(function() { $("div").add("img").show(1000); }); }); </script> <input type="button" value="SlideUp"> <input type="button" value="SlideDown"> <input type="button" value="Hide"> <input type="button" value="Show"><br> <div></div><img src="04.jpg">
여러 애니메이션 효과가 앞서 언급되었으며, jQuery는 PPT에서 유사한 슬라이드 커튼을 시뮬레이션하기 위해 SlideUp() 및 SlideDown()도 제공합니다. 효과는 완전히 동일합니다. 느린() 및 숨기기()와 같습니다.
위 코드는 add 메소드를 사용하여 결합된 div와 img를 정의합니다.
5. 사용자 정의 애니메이션
프레임워크의 다양성과 코드 파일의 크기를 고려할 때 jQuery는 모든 애니메이션 효과를 다룰 수는 없지만 개발자가 애니메이션을 사용자 정의할 수 있는 animate() 메서드를 제공합니다. 이 섹션에서는 주로 animate() 메서드의 두 가지 형식과 응용 프로그램을 소개합니다.
animate() 메서드는 개발자에게 많은 공간을 제공합니다. 그것은 두 가지 형태로 제공됩니다. 첫 번째 형식이 더 일반적으로 사용됩니다. 사용법은 다음과 같습니다
animate(params,[duration],[easing],[callback])
여기서 params는 변경하려는 CSS 속성 목록이고 변경하려는 최종 값인 Duration은 선택 사항 및 show()/ hide()의 매개 변수는 정확히 동일한 의미를 갖습니다. 완화는 일반적으로 애니메이션 플러그인에서 사용되는 선택적 매개변수입니다. 리듬 변경 과정을 제어하는 데 사용됩니다. jQuery는 선형과 스윙이라는 두 가지 값만 제공합니다. 콜백은 선택적 콜백 함수입니다. 애니메이션이 완료된 후 실행됩니다.
주의가 필요합니다. params의 변수는 낙타 명명 방법을 따릅니다. 예를 들어 paddingLeft는 padding-left로 작성할 수 없습니다. 또한 params는 CSS에서 숫자 값으로 표현되는 속성만 될 수 있습니다. 예를 들어 width.top.opacity 등입니다.
BackgroundColor와 같은 속성은 animate에서 지원되지 않습니다.
<style> div { background-color: #FFFF00; height: 40px; width: 80px; border: 1px solid #000000; margin-top: 5px; padding: 5px; text-align: center; } </style> <script type="text/javascript"> $(function() { $("button").click(function() { $("#block").animate({ opacity: "0.5", width: "80%", height: "100px", borderWidth: "5px", fontSize: "30px", marginTop: "40px", marginLeft: "20px" }, 2000); }); }); </script> <button id="go">Go>></button> <div id="block">动画!</div>
params에서 jQuery는 "+=" 또는 "-="를 사용하여 상대적인 변경 사항을 나타낼 수도 있습니다. 예를 들어,
<style> div { background-color: #FFFF00; height: 40px; width: 80px; border: 1px solid #000000; margin-top: 5px; padding: 5px; text-align: center; position: absolute; } </style> <script type="text/javascript"> $(function() { $("button:first").click(function() { $("#block").animate({ left: "-=80px" //相对左移 }, 300); }); $("button:last").click(function() { $("#block").animate({ left: "+=80px" //相对右移 }, 300); }); }); </script> <button >Go>></button> <button >Go>></button> <div id="block">动画!</div>
는 먼저 div를 절대적으로 배치한 다음 animate()에서 -= 및 +=를 사용하여 각각 상대적인 왼쪽 및 오른쪽 이동을 달성합니다.
animate() 메소드는 아래와 같이 또 다른 형태를 가지고 있습니다:
animate(params, options)
그 중 params는 첫 번째 형태와 완전히 동일하며 options는 주로 기간을 포함하는 애니메이션 선택적 매개변수 목록입니다. , esaing , 콜백, 대기열 등, 여기서 Duration.easing.callback은 첫 번째 형식과 완전히 동일하고 queue는 부울 값으로, jQuery를 형성하는 여러 animate()가 있는 경우 현재 animate()가 다음 animate()를 따라가며, 순차적으로 실행할지(true) 아니면 동시에 false를 실행할지
다음 예는 animate()의 두 번째 사용법을 보여줍니다.
<style> div { background-color: #FFFF22; width: 100px; text-align: center; border: 2px solid #000000; margin: 3px; font-size: 13px; font-family: Arial, Helvetica, sans-serif; } input { border: 1px solid #000033; } </style> <script type="text/javascript"> $(function() { $("input:eq(0)").click(function() { //第一个animate与第二个animate同时执行,然后再执行第三个 $("#block1").animate({ width: "90%" }, { queue: false, duration: 1500 }) .animate({ fontSize: "24px" }, 1000) .animate({ borderRightWidth: "20px" }, 1000); }); $("input:eq(1)").click(function() { //依次执行三个animate $("#block2").animate({ width: "90%" }, 1500) .animate({ fontSize: "24px" }, 1000) .animate({ borderRightWidth: "20px" }, 1000); }); $("input:eq(2)").click(function() { $("input:eq(0)").click(); $("input:eq(1)").click(); }); $("input:eq(3)").click(function() { //恢复默认设置 $("div").css({ width: "", fontSize: "", borderWidth: "" }); }); }); </script> <input type="button" id="go1" value="Block1动画"> <input type="button" id="go2" value="Block2动画"> <input type="button" id="go3" value="同时动画"> <input type="button" id="go4" value="重置"> <div id="block1">Block1</div> <div id="block2">Block2</div>
以上两个div块同时运用了三个动画效果,其中第一个div快的第一个动画添加了queue:false参数,使得前两项两个动画同时执行。可以通过重置反复测试,熟悉animate()第二种形式。
以上就是本文的全部内容了,希望大家能够喜欢。
相关推荐:
위 내용은 jQuery 애니메이션과 특수효과에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!