jQuery_jquery에서의 애니메이션 처리 요약

queue()/dequeue()
이 두 메소드는 Ajax의 XMLHttpRequest 객체만큼 숨겨져 일반 사람들에게는 알려지지 않습니다. 이 두 가지 방법은 애니메이션을 처리할 때 매우 유용합니다.

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

$('#test').animate ({
"너비": "300px",
"높이": "300px",
"불투명도":"1"
});

이렇게 하면 테스트 div의 높이, 너비, 불투명도가 동시에 변경됩니다. 때로는 동기적으로 실행하고 싶지 않지만 먼저 모양 변경과 투명도 변경을 분리합니다. 300*300 div를 사용하고 투명도가 점차 변하면 이렇게 작성해야 합니다

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

$('#test').animate ({
"너비": "300px",
"높이": "300px",
}, function () {
"$('#test').animate({ "불투명도 ": "1 " });
});

학생들은 10개의 애니메이션 프로세스가 있다면 코드가 어떻게 보일지 상상할 수 있습니다. queue() 및 dequeue()는 이러한 문제를 해결할 수 있으며 모든 프로세스 메서드에 대한 대기열을 만들고 먼저 함수를 호출합니다.


queue( [queueName ], newQueue ) 구문을 살펴보세요. 작업에서 대기열 메서드

를 실행하려고 합니다.

첫 번째 매개변수는 대기열 이름입니다. 작성하지 않은 경우 기본값은 fx입니다

두 번째 매개변수는 모든 대기열 함수를 저장하는 함수 배열이거나 대기열에 새 함수를 추가하는 콜백 함수일 수 있습니다

dequeue( [queueName ] ) 일치하는 요소에 대해 대기열에서 다음 함수를 실행합니다

이 메소드가 호출될 때마다 대기열의 다음 함수가 실행됩니다

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

var q = [
                     > $(this).animate({
                                                                                              >             🎜>
함수 next(){
$('#test').dequeue('myQueue');
}

         $('#test').queue('myQueue', q);
                                                                              
위 코드를 사용하면 테스트 div를 먼저 200*200으로 변경한 다음 400*400으로 변경할 수 있습니다. 각 애니메이션은 콜백 함수를 실행하고 대기열의 다음 메서드를 호출하며 두 애니메이션이 순차적으로 실행됩니다. 실행 중에 기능을 추가하고 싶다면 이렇게 하면 됩니다

코드 복사

코드는 다음과 같습니다.

var q = [
            함수 () {
               $(this).animate({
                  "너비":
                    "높이":"200px"
               }, 다음)
           },
            함수 () {
              $(this).animate({
                   " 너비": "400px",
                    "높이": "400px"
               }, 다음);
            }
        ];

        함수 next(){
            $('#test').dequeue('myQueue');
        }

        $('#test').queue('myQueue', q);
        next();
        $('#test').queue('myQueue',function () {
            $(this).slideUp().dequeue('myQueue');
        });

总而言这两个方法就是为了方便动画按光预定次序执行

clearQueue() /stop()

这两个방법주주要是为了取消动画

clearQueue( [queueName ] ) 将队列中函数清空

stop( [queue ] [,clearQueue ] [, jumpToEnd ] ) 用于停止正재进行的动画

대기열：정재进行的动画队列name称

clearQueue：默认值为false，是否将队列本身也清空

jumpToEnd：默认值为false，是否立即执行完动画

如果想停止刚才动画可以这么写

复主代码 代码如下:

$('#test').clearQueue('myQueue');

这样写不会不会终止动画，只是当前动画执行完后，不会再调用队列中下一个动画（队列被清 空，没有下一了) ，如果想立即停止动画，可以这么写

复主代码 代码如下:

$('#test').stop();

정지 애니메이션을 일시정지할지, 즉시 실행할지는 stop()의 매개변수를 설정해야 합니다

slideDown()/ SlideUp()/ SlideToggle()

슬라이드 효과는 애니메이션, 특히 메뉴를 만들 때 자주 사용됩니다. 이 세 가지 기능은 매우 간단합니다. 즉, 요소가 축소/늘이기/자동으로 축소 및 늘리기를 결정하지만 해당 매개변수는 지속 시간뿐만 아니라 add 다른 컨트롤에 대해서는 API의 소개를 살펴보세요. Sanger 함수 매개변수는 다음과 같습니다. 슬라이드업의 예입니다

.

슬라이드업(옵션)

옵션에서 일반적으로 사용되는 구성은 다음과 같습니다.

기간: 애니메이션 시간

queue: 위 내용을 읽어보시면 이해가 되실 겁니다

단계: 애니메이션 도중 속성이 변경될 때마다 실행됩니다.

완료: 애니메이션이 완료되면 실행

start : 애니메이션이 시작될 때 실행

always: 애니메이션이 종료되거나 예기치 않게 완료되지 않는 경우 발생합니다.

이 세 가지 함수는 실행 시 요소의 높이를 수정합니다. sideUp()이 실행되면 높이가 복원되고 대화상자가 없음으로 설정됩니다.

fadeIn()/ fadeOut()/ fadeToggle()/ fadeTo()

fadeIn()/ fadeOut()/ fadeToggle() 사용법은 슬라이드 시리즈와 유사합니다. , 더 이상 하나씩 설명하지 않고 이 세 가지 함수만 요소의 투명도를 수정합니다. fadeOut() 함수가 실행된 후 요소의 불투명도를 복원하고 표시 속성을 없음으로 설정합니다

표시()/숨기기()/토글()

이 세 가지 기능의 사용법은 슬라이드 시리즈와 동일하지만 효과에는 약간의 차이가 있습니다 1. 매개변수 기간을 쓰지 않으면 애니메이션 없이 바로 실행됩니다

2. 높이, 너비, 불투명도 속성을 동시에 수정하는 애니메이션입니다.

3. hide() 실행이 완료되면 높이, 너비, 불투명도 속성이 복원되고 표시가 없음으로 설정됩니다

animate()

위의 기능으로는 일부 복잡한 애니메이션을 구현할 수 없습니다. 이때 강력한 animate()를 사용하는 방법이 두 가지 있습니다.

.animate( 속성 [, 기간 ] [, 완화 ] [, 완료 ] )
대부분의 속성은 설명이 필요하지 않습니다. 속성의 값은 리터럴, 함수, "toggle" 또는 간단한 표현식일 수 있습니다. 함수인 경우 반환 값이 속성에 할당됩니다. jQuery에 익숙한 학생들은 분명히 이해할 것입니다." "토글"이란 초기값과 최소값 사이에서 속성을 전환하는 것입니다. 토글을 사용할 수 있는 속성에는 숫자값 속성을 포함하여 너비, 높이, 불투명도 등이 포함됩니다. . 간단한 표현은 =, -= 등입니다. 예를 들어 "width":" =10px"와 같을 수 있습니다.

코드 복사

코드는 다음과 같습니다.$( "#block" ).animate ({ 너비: "70%", 불투명도: 0.4,

marginLeft: "0.6in",

글꼴 크기: "3em",
borderWidth: " =10px"
}, 1500 );



콜백 함수를 전달하면 애니메이션이 실행된 후 해당 함수가 호출됩니다

.animate(속성, 옵션)

이 사용법은 더 유연하고 속성은 이전 사용법과 동일하며 일반적으로 사용되는 옵션은 다음과 같습니다

기간: 애니메이션 시간

큐: 함수 큐

단계: 속성별 조정 롤백 기능

완료: 애니메이션을 완료하는 콜백 함수

start: 애니메이션이 시작될 때 호출됩니다.

always: 애니메이션이 종료되거나 예기치 않게 완료되지 않는 경우 발생합니다.

jQuery가 사용하기 쉽다면 위의 구성이 매우 친숙한가요?

코드 복사

코드는 다음과 같습니다.$( "#book" ).animate ({ 너비: "토글", 높이: "토글"

}, {

지속 시간: 5000,
특수Easing: {
너비: "선형",
height: "easyOutBounce"
},
완료: function() {
$( this ).after( "

애니메이션 완료.

" );
}
} );




hover()

엄밀히 말하면 애니메이션 기능은 아니지만, IE 하위 버전의 hover는 많은 요소에 대해 hover가 동작하지 않기 때문에 CSS로 완료할 수 없는 액션이 ​​많기 때문에 JavaScript가 Haver 이벤트를 처리하는 경우가 많습니다.

.hover( handlerIn(eventObject), handlerOut(eventObject) )
방법은 아주 간단해서 자세히 소개하지 않으니 mousein과 mouseout을 같이 쓰시면 됩니다.