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

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

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

코드 복사 코드는 다음과 같습니다.

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(기간, [콜백]);

예시

코드 복사

코드는 다음과 같습니다.

         ">           
          

fadeTo() 메소드 사용.

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

예:

코드 복사 코드는 다음과 같습니다.

fadeOut 관련 매개변수

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

가능한 값:

밀리초(예: 1500)

"천천히"

"보통"

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

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

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

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

코드 복사 코드는 다음과 같습니다.

앞쪽 화면에서는 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;
                텍스트 정렬: 중앙;
            }
        스타일>
       
        이동>>
       

动画！

여기params中，jQuery还可以사용“ =”或者"-="来表示상对变化。如

复主代码 代码如下:

            div {
                배경색: #FFFF00;
                높이: 40px;
                너비: 80px;
                테두리: 1px 솔리드 #000000;
                여백 상단: 5px;
                패딩: 5px;
                텍스트 정렬: 중앙;
                위치: 절대;
            }
        스타일>
       
        이동>버튼>
        이동>버튼>
       

动画！

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;
            }
>          
       
       
       
       
       

블록1

       

블록2

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