jQuery 애니메이션 처리 요약

저는 1년 넘게 프런트엔드 작업을 해왔습니다. 사장님이 젊고 역동적인 효과를 추구하셔서 페이지 요소를 단순히 숨기고 표시할 수만은 없어서 제가 찾은 애니메이션 효과를 자주 사용합니다. jQuery 애니메이션은 정말 사용하기 쉽습니다. 일반적으로 사용되는 몇 가지를 요약해 보겠습니다. 사용할 때마다 API를 살펴보지 않아도 되기를 바랍니다

queue()/dequeue()

이 두 가지 방법은 숨겨져 있습니다. Ajax의 XMLHttpRequest 객체로 일반 사람들에게는 알려져 있지 않습니다. 이 두 가지 방법은 애니메이션 처리에 매우 유용합니다. 우리는 종종 다음과 같은 코드를 작성합니다. 처음에는 300*300p가 되고 점차적으로 투명도가 이렇게 바뀌게 됩니다

$('#test').animate({            "width": "300px",            "height": "300px",            "opacity":"1"
        });

학생들은 상상해보세요. 10개의 애니메이션 프로세스가 있는데, 이런 식으로 queue()와 dequeue()가 이런 종류의 문제를 해결할 수 있습니다. 구문 먼저

queue( [queueName ], newQueue )

작업이 곧 실행됩니다. 대기열 메서드

첫 번째 매개 변수는 대기열 이름이 작성되지 않은 경우 기본값은 fx 두 번째 매개 변수는 가능합니다. 모든 대기열 함수를 저장하는 함수 배열이거나 대기열에 추가하기 위한 콜백 함수일 수 있습니다. 새로운 함수

dequeue( [queueName ] )

일치하는 요소에 대해 대기열에서 다음 함수를 실행합니다

이번에 매번 메서드가 호출되면 대기열의 다음 함수가 실행됩니다

$('#test').animate({            "width": "300px",            "height": "300px",
        }, function () {
            $('#test').animate({ "opacity": "1" });
        });

위 코드에서는 테스트 p가 먼저 변경되도록 허용합니다. 200*200이 되고 그 다음에는 400*400이 됩니다. 각 애니메이션은 콜백 함수를 실행하고 다음을 호출합니다. 두 애니메이션이 순차적으로 실행되는 동안 실행 기간 동안 기능을 추가하고 싶다면 이렇게 하면 됩니다

var q = [            function () {
                $(this).animate({                    "width": "200px",                    "height":"200px"
                }, next)
            },            function () {
                $(this).animate({                    "width": "400px",                    "height": "400px"
                }, next);
            }
        ];        function next(){
            $('#test').dequeue('myQueue');
        }

        $('#test').queue('myQueue', q);
        next();

간단히 말하면 이 두 가지 방법은 미리 결정된 순서

clearQueue() /stop()

이 두 가지 방법은 주로 애니메이션을 취소하는 데 사용됩니다

clearQueue( [queueName ] )

Queue 함수는

stop( [queue ] [,clearQueue ] [, jumpToEnd를 삭제합니다. ] ) 는 진행 중인 애니메이션을 중지하는 데 사용됩니다.

queue: 진행 중인 애니메이션 대기열의 이름

clearQueue: 기본값은 false, 대기열에 추가할지 여부 또한 삭제됩니다

jumpToEnd: 기본값은 false, 대기열에 추가할지 여부 바로 애니메이션을 실행

지금 애니메이션을 멈추고 싶다면 이렇게 쓰면 됩니다

var q = [            function () {
                $(this).animate({                    "width": "200px",                    "height":"200px"
                }, next)
            },            function () {
                $(this).animate({                    "width": "400px",                    "height": "400px"
                }, next);
            }
        ];        function next(){
            $('#test').dequeue('myQueue');
        }

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

이렇게 쓰면 애니메이션이 종료되지는 않지만 현재 애니메이션이 실행된 후에는 다음 애니메이션이 나오지 않습니다. 큐가 다시 호출됩니다(큐가 지워졌고 다음 큐가 없습니다). 애니메이션을 즉시 중지하려면 다음과 같이 작성하면 됩니다.

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

애니메이션을 중지하여 일시 중지할지 아니면 즉시 실행하려면 중지를 구성해야 합니다. ()의 매개변수는

slideDown()/slideUp()/slideToggle()

슬라이드 효과는 애니메이션, 특히 메뉴를 할 때 자주 사용됩니다. 이 세 가지 기능은 매우 간단합니다. 즉, 요소가 축소/확장/자동으로 축소 또는 확장되는지 여부를 결정하지만 해당 매개변수는 단지 지속 시간이 아닙니다. API의 소개를 살펴보세요. 이와 비슷합니다. 기본적으로 애니메이션을 완료하려면

slideUp(options)

옵션에서 자주 사용됩니다. 구성에는 다음이 포함됩니다.

duration: animation time

queue: 위 내용을 읽으면 이해가 될 것입니다.

step:

이 실행될 때마다 실행됩니다. property 애니메이션 진행 중 변경

complete: 애니메이션이 완료될 때 실행

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

always: 애니메이션이 종료되거나 사고가 발생하여 실행이 완료되지 않을 때 발생

이 세 가지 함수는 실행될 때 요소 높이를 수정합니다. 높이가 복원되고 대화 상자는

fadeIn()/ fadeOut()/ fadeToggle()/ fadeTo로 설정됩니다. ()

fadeIn()/ fadeOut()/ fadeToggle()은 슬라이드 시리즈와 비슷합니다. 하나씩 설명하지는 않겠습니다만, fadeOut() 이후에 이 세 가지 기능이 수정됩니다. 함수가 실행되면 요소의 불투명도가 복원되고

display

속성이 none

fadeTo( Duration, opacity [, easing ] [,complete ] )

fadeTo() 메서드가 그렇게 복잡하지는 않지만 fadeTO()의 지속 시간과 불투명도는 생략 가능하며 반드시 작성해야 합니다

show()/ hide()/ toggle()

这三个函数的用法和slide系列一样，但是在效果上有几点儿不同

1.如果参数duration不写，那么回立即执行没有动画

2.这个动画同时修改height、width、opacity属性

3.hide()执行完成后会将height、width、opacity属性还原，并把display设为none

animate()

有些复杂的动画靠上面几个函数不能够实现，这时候就是强大的animate派上用场的时候了,animate()有两种用法

.animate( properties [, duration ] [, easing ] [, complete ] )

大部分属性都不用解释，properties是个json，属性的值可以是字面量、function、”toggle”、简单表达式，如果是function会把返回值赋给属性，熟悉jQuery的同学肯定明白“toggle”是什么，就是让一个属性在初始值和最小值之间切换，能够使用toggle的属性有width、height、opacity等包含数字值属性，简单表达式是+=、-=等，比如可以这么些 “width”:”+=10px”。

$( "#block" ).animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "+=10px"
  }, 1500 );

如果传入了回掉函数，该函数会在动画执行完后调用

.animate( properties, options )

这种用法更为灵活，properties和前一个用法一样，常用options有

duration：动画时间

queue：function队列

step：每次属性调整的回掉函数

complete：完成动画的回掉函数

start：动画开始的时候调用

always：动画被终止或者意外发生没有执行完时发生

要不说jQuery好用，上面这几个配置是不是很熟悉呢

$( "#book" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<p>Animation complete.</p>" );
    }
  });

hover()

严格说这个并不是个动画函数，但是由于低版本IE的hover对很多元素都不起作用，用CSS无法完成很多动作，所以经常需要使用JavaScript进行haver事件的处理。

.hover( handlerIn(eventObject), handlerOut(eventObject) )

方法很简单，不多介绍了，这样就能把mousein 和mouseout写在一起了。

위 내용은 jQuery 애니메이션 처리 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!