자바기반의 웹&앱 응용 SW개발자 양성과정 72일차 -108

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

 

• • properties

    Type: PlainObject

    An object of CSS properties and values that the animation will move toward.

  • duration (default: 400)

    Type: Number or String

    A string or number determining how long the animation will run.

  • easing (default: swing)

    Type: String

    A string indicating which easing function to use for the transition.

  • complete

    Type: Function()

    A function to call once the animation is complete, called once per matched element.

     

. animate( properties , options )

 

• properties

  Type: PlainObject

  An object of CSS properties and values that the animation will move toward.

• options

  Type: PlainObject

  A map of additional options to pass to the method.

  • duration (default: 400)

    Type: Number or String

    A string or number determining how long the animation will run.

  • easing (default: swing)

    Type: String

    A string indicating which easing function to use for the transition.

  • queue (default: true)

    Type: Boolean or String

    A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call. dequeue("queuename") to start it.

  • specialEasing

    Type: PlainObject

    An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions. (version added: 1.4)

  • step

    Type: Function( Number now, Tween tween )

    A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.

  • progress

    Type: Function( Promise animation, Number progress, Number remainingMs )

    A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties. (version added: 1.8)

  • complete

    Type: Function()

    A function that is called once the animation on an element is complete.

  • start

    Type: Function( Promise animation )

    A function to call when the animation on an element begins. (version added: 1.8)

  • done

    Type: Function( Promise animation, Boolean jumpedToEnd )

    A function to be called when the animation on an element completes (its Promise object is resolved). (version added: 1.8)

  • fail

    Type: Function( Promise animation, Boolean jumpedToEnd )

    A function to be called when the animation on an element fails to complete (its Promise object is rejected). (version added: 1.8)

  • always

    Type: Function( Promise animation, Boolean jumpedToEnd )

    A function to be called when the animation on an element completes or stops without completing (its Promise object is either resolved or rejected). (version added: 1.8)

애니메이션은 순차적으로 실행됩니다.

애니메이션에는 큐에 쌓이게 되며 큐는 대기열, 버퍼라고 생가 가면 됩니다.

 

애니메이션은 시나리오를 작성한다는 생각으로 할 수 있습니다. 

 

큐의 이름을 지정하지 않으면 기본값으로 fx라는 기본 이름을 가지고 있습니다.

. queue( [queueName ] ) Returns: Array

Description: Show the queue of functions to be executed on the matched elements.

• version added: 1.2.queue( [queueName ] )

  • queueName

    Type: String

    A string containing the name of the queue. Defaults to fx, the standard effects queue.

• setInterval -- 주기적인 반복 밀리세컨드가 기준 

• clearInterval -- 주기적인 반복을 해제

• setTimeout - 지정된 밀리세컨드 뒤에 한번 실행됨 

전부 window객체에 포함되어있습니다.

 

바닐라 자바스크립트로 이러한 애니메이션을 만들 수 있지만 jQuery가 자연스럽게 구현을 잘해놓았기에 제이쿼리를 이용한 애니메이션을 사용합니다.

 

애니메이션 메서드는 전부 비동기로 실행됩니다.

애니메이션은 순차적으로 queue에 들어가게 되고 들어온 순서대로 출력되게 됩니다.

 

중간에 애니메이션을 멈추고  싶다면 stop() 메서드나 clearQueue("name") 메서드를 사용하면 됩니다. 다시 진행하고 싶다면 dequeue를 사용하면 됩니다.

 

노드를 문서 전체에서 찾는 것은 바람직하지 않습니다.  특정 구역에서 노드를 찾아 활용해야 하는데 그것을 도와주는 것이 Traversing입니다.

메서드	설 명
children()	선택된 노드의 모든 자식 노드만 선택한다.
find()	선택한 노드의 자손 노드 중 조건에 맞는 노드를 선택한다.
next()	선택한 노드의 다음 노드를 선택한다.
nextAll()	선택한 노드의 다음 모든 노드를 선택한다.
parent()	선택한 노드의 상위 부모 노드를 선택한다.
parents()	선택한 노드의 모든 부모 노드를 선택한다.
prev()	선택한 노드의 이전 노드를 선택한다.
prevAll()	선택한 노드의 모든 이전 노드를 선택한다.
closest()	선택한 노드를 포함하면서 가장 가까운 상위 노드를 선택한다.
nextUntil()	다음에 위치한 노드를 조건에 맞을 때까지 찾는다.
parentsUntil()	조건이 참이 될 때까지 부모 노드를 찾는다.
prevUntil()	이전에 위치한 노드를 조건에 맞을 때까지 찾는다.
siblings()	형제 노드들을 모두 찾는다.

다음과 같은 메서드를 통해 특정 집합을 구할 수 있습니다.

특정 집합을 구했다면 필터링을 통해 좀 더 자세하게 특정 노드를 선택할 수 있습니다.

 

선택된 집합에서 다시 조건에 맞는 jQuery 집합을 선택한다.

 

메서드	설 명
eq()	인덱스 번호에 해당하는 노드를 찾습니다. index 0은 첫 번째 노드를 의미한다.
filter()	선택된 노드 집합에서 선택자를 추가하거나 함수를 사용하여 원하는 결과를 추출해낼 수 있다.
first()	선택된 노드 집합에서 첫 번째 자식 노드를 찾는다.
has()	선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여  범위를 축소한다.
is()	매개 변수로 selector, element, jQuery를 입력하여 입력한 객체가 있으면 true를 반환한다.
last()	선택된 노드 집합을 변경한다.
map()	대상이 되는 노드 집합을 변경한다.
not()	조건에 맞지 않는 것들만 찾아서 선택한다.
slice()	선택된 집합을 조건의 범위로 재선택한다. 배열의 slice()와 같은 기능이다.

 

 

또한 선택된 집합들을 개개별로 사용하고 싶다면 

. each() 메서드를 사용할 수 있습니다.

이 메서드는 집합에 포함됨 엘리먼트들을 인덱스 기반으로 뽑아낼 수 있습니다.

 

또한 모든 제이쿼리 메서드에는 실행되는 자신을 가리키는 this라는 키워드가 존재합니다.

이로 인해 자신에게 이벤트가 실행될 때 적절한 로직을 처리할 수 있습니다.

 

offsetParent()는 자신의 위치 좌표의 기준을 잡어  현재 연결된 위치에 대해서 절대 위치의 부모를 찾습니다.

Parent()는 reletive속성에 상관없이 태그 내 포함된 부모를 얻을 수 있습니다.