jQuery 애니메이션 및 특수효과에 대한 자세한 설명_jquery

1. hide() 및 show() 표시 및 숨기기

애니메이션의 경우 표시 및 숨기기는 가장 기본적인 효과 중 하나입니다. 이 섹션에서는 jQuery의 표시 및 숨기기에 대해 간략하게 소개합니다.

코드 복사 코드는 다음과 같습니다. $(function() { $("input:first").click(function() { $("p").hide() //숨기기 }); $("input:last").click(function() { }); }); > 효과를 보려면 버튼을 클릭하세요

& Lt; div & gt; & lt; em & gt; 맞춤형 애니메이션 등 1. 표시 및 숨기기 hide() 및 show() 애니메이션의 가장 기본적인 효과 중 하나인 표시 및 숨기기는 jQuery의 표시 및 숨기기에 대해 간략하게 소개합니다. >

위는 hide() 및 show() 함수에 대한 테스트입니다. 2. show(), hide() 및 Toggle() 메서드를 사용합니다

이전 예제에서는 show() 및 hide() 메소드를 간략하게 소개했습니다. 실제로 이 두 메소드는 매개변수를 사용하여 표시 및 숨기기 프로세스를 제어할 수 있습니다. 구문은 다음과 같습니다

표시(기간,[콜백]); hide(기간,[콜백]);

그 중 Duration은 애니메이션 실행 시간의 길이를 나타내며, 느림, 보통, 빠름 등 속도를 나타내는 문자열일 수도 있고, 시간(밀리초)을 나타내는 정수일 수도 있습니다. 콜백은 선택적 콜백 함수입니다. 애니메이션이 완료된 후 실행됩니다.

코드 복사 코드는 다음과 같습니다. $(function() { $("input:first").click(function() { $("p").hide(300) //숨기기 }); $("input:last").click(function() { $("p").show(500) //표시 ; }); }); >

hide() 및 show()에 시간 매개변수가 추가된 점을 제외하면 예제는 첫 번째 예제와 동일합니다. 실제로 toogle()은 이벤트 매개변수를 추가할 수도 있습니다. 2. fadeIn() 및 fadeOut() 메서드를 사용하세요

애니메이션 효과의 경우 jQuery는 fadeIn() 및 fadeOut이라는 두 가지 실용적인 방법도 제공합니다. 해당 애니메이션 효과는 페이딩과 유사하며 구문은 Slow() 및 hide()와 완전히 동일합니다. fadeIn(기간, [콜백]);

fadeOut(기간, [콜백]); 예시

코드 복사

코드는 다음과 같습니다. $(function() { $("input:eq(0)").click(function() { 을 통해 }); $("input:eq(1)").click(function() { $("img").fadeIn(1000) // 점차적으로 fadeIn }); });

http://study.ahthw.com/gtimg/book/2014/11/201411120129479688.jpg ">

fadeTo() 메소드 사용.

fadeTo() 메서드는 선택한 요소의 불투명도를 지정된 값으로 점진적으로 변경합니다.

예:

코드 복사 코드는 다음과 같습니다. $(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); }); }); > ~

fadeOut 관련 매개변수 속도 선택 과목. 요소가 현재 투명도에서 지정된 투명도로 변경되는 속도를 지정합니다.

가능한 값:

밀리초(예: 1500) "천천히"

"보통" "빠르게" 불투명도가 필요합니다. 페이드 인 또는 페이드 아웃할 투명도를 지정합니다. 0.00에서 1.00 사이의 숫자여야 합니다. 콜백 선택 과목. fadeTo 함수가 실행된 후 실행될 함수입니다.

콜백에 대해 자세히 알아보려면 jQuery 콜백 장을 방문하세요.

이 매개변수는 속도 매개변수를 설정하지 않으면 설정할 수 없습니다.

3. 슬라이드 슬라이드업 및 슬라이드다운 효과

코드 복사 코드는 다음과 같습니다. $(함수() { $("입력:eq(0)").click(function() { $("div").add("img").slideUp(1000); }); $("입력:eq(1)").click(function() { $("div").add("img").slideDown(1000); }); $("입력:eq(2)").click(function() { $("div").add("img").hide(1000); }); $("입력:eq(3)").click(function() { $("div").add("img").show(1000); }); });

앞쪽 화면에서는 jQuery를 사용하여 SlideUp()과 SlideDown()을 사용하고 있으며 PPT중의 그림은 Slow()와 Hide()와 동일합니다. 。

4.자정义动画 JQuery가 사용할 수 없는 일반적인 사용성, jQuery가 아닌 animate() 방식, 能够使开发者자체 설정.节主要通过介绍animate()방법을 사용하세요两种형式及应사용。

animate()방식으로 실행하는 방법은 다음과 같습니다.

animate(매개변수,[기간],[완화],[콜백]) 其中params는 为希望进行变幻的css属性列表, 以及希望变化到的最终值, 지속 시간, 为可选项, 与show()/hide() 의 参数含义完전체상동등합니다.可选参数，대중적 사용. jQuery는 선형 및 스윙을 사용하여 선형 및 스윙을 구현합니다.callback은 回调函数에서 사용됩니다.

需要注意。params中的变weight遵循camel命名方式。例如paddingLeft는 padding-left가 아닙니다. 🎜> 이미지 배경색상이 애니메이션화되지 않습니다.

复主代码

代码如下: div { 배경색: #FFFF00; 높이: 40px; 너비: 80px; 테두리: 1px 솔리드 #000000; 여백 상단: 5px; 패딩: 5px; 텍스트 정렬: 중앙; } $(함수() { $("버튼").click(function() { $("#block").animate({ 불투명도: "0.5", 너비: "80%", 높이: "100px", borderWidth: "5px", 글꼴 크기: "30px", marginTop: "40px", marginLeft: "20px" }, 2000); }); }); 이동>> 动画！ 여기params中，jQuery还可以사용“ =”或者"-="来表示상对变化。如

复主代码 代码如下: div { 배경색: #FFFF00; 높이: 40px; 너비: 80px; 테두리: 1px 솔리드 #000000; 여백 상단: 5px; 패딩: 5px; 텍스트 정렬: 중앙; 위치: 절대; } $(함수() { $("버튼:첫 번째").click(function() { $("#block").animate({ 왼쪽: "-=80px" //상对左移 }, 300); }); $("버튼:마지막").click(function() { $("#block").animate({ 왼쪽: " =80px" //상对右移 }, 300); }); }); 이동> 이동> 动画！ animate()방법이 없습니다. 애니메이션(매개변수,옵션) 其中,params与第一种shape式完全样,options为动画可选参数列表,主要包括duration,esaing,callback,queue等,其中duration.easing.callback与第一种shape式完全一样,queue为布尔值，表示当多个 animate()组成jQuery时，当前animate()紧接这下一个animate(),是按顺序执行(true)还是同时触发false

如下例子, 展示了animate()第二种사용법。

复主代码 代码如下: div { 배경색: #FFFF22; 너비: 100px; 텍스트 정렬: 가운데; 테두리: 2px 단색 #000000; 여백: 3px; 글꼴 크기: 13px; 글꼴 모음: Arial, Helvetica, sans-serif; } 입력 { 테두리: 1px 솔리드 #000033; } > $(function() { $("input:eq(0)").click(function() { //첫 번째 애니메이트와 두 번째 애니메이트가 동시에 실행되고, 이어서 세 번째 애니메이트가 실행됩니다 $("#block1").animate({ 밖으로 }, { 대기열: 거짓, 지속시간: 1500 ~ .animate({ > }, 1000) .animate({ borderRightWidth: "20px" > }); $("input:eq(1)").click(function() { //3개의 animate 를 순차적으로 실행 $("#block2").animate({ 밖으로 > .animate({ 글꼴 크기: "24px" }, 1000) .animate({ borderRightWidth: "20px" }, 1000); }); $("입력:eq(2)").click(function() { $("입력:eq(0)").click(); $("입력:eq(1)").click(); }); $("입력:eq(3)").click(function() { //恢复默认设置 $("div").css({ 너비: "", 글꼴 크기: "", borderWidth: "" }); }); }); 블록1 블록2

以上就是本文의 전체 부서 内容了, 希望大家能够喜欢。