jQuery Animation

Sequence Animation

동일 엘리먼트인 경우

$(".box").animate({ left : "150px" },1000)
  .animate({ top : "150px" },1000)
  .animate({ left : "50px" },1000)
  .animate({ top : "0px" },1000);

See the Pen sequence animate by son chan uk (@sculove) on CodePen.

다른 엘리먼트인 경우 (Callback 활용)

$(".box1").animate({ left : "200px" },1000, function() {
  $(".box2").animate({ left : "50px" },1000, function() {
    $(".box1").animate({ top : "150px" },1000, function() {
      $(".box2").animate({ top : "0px" },1000, function() {
        alert("완료!");
      });
    });
  });
});

See the Pen sequence animate - multi by son chan uk (@sculove) on CodePen.

다른 엘리먼트인 경우 (Promise 활용)

$(".box1").animate({ left : "200px" },1000).promise().then(function() {
  return $(".box2").animate({ left : "50px" },1000).promise();
}).then(function() {
  return $(".box1").animate({ top : "150px" },1000).promise();
}).then(function() {
  return $(".box2").animate({ top : "0px" },1000).promise();
}).then(function() {
  alert("완료!");
});

Parallel Animation

var $box1 = $(".box1");
var $box2 = $(".box2");
$box1.animate({ left : "200px" },1000);
$box2.animate({ top : "0px" }, 1000);

$.when($box1, $box2).then(function() {
	alert("완료");
});

See the Pen Parallel animate by son chan uk (@sculove) on CodePen.

Wow~! jQuery

jQuery.fx.animate은 어떻게 구현되어 있길래...???

Let's look into jQuery.fx.animate

jQuery.fx.Animate Flow

애니메이션을 순차적으로 실행

• deferred 객체를 생성하는 함수(doAnimation)를 Queue에 넣음
• doAnimation을 호출하여, deferred 객체를 생성
• deferred 상태가 resolved되면 다음 Queue에 있는 doAnimation 호출

Queue 구조, Deferred 객체

여러 대상을 동시에 애니메이션

• jQuery instance 별로 queue가 존재
• 하나의 타이머(jQuery.fx.tick)에서 애니메이션이 호출됨
• 애니메이션 좌표 계산시 경과 시간을 기준으로 좌표 계산

하나의 타이머, 경과시간 기준으로 좌표 계산

jQuery.fn.animate 주의사항

jQuery.fn.animate이 암묵적으로 하는 작업

width or height를 변경할 경우

애니메이션 진행 중 overflow:hidden

See the Pen jQuery.fn.animate overflow issue by son chan uk (@sculove) on CodePen.

애니메이션 진행 전 inline -> inline-block

See the Pen jQuery.fn.animate inline issue by son chan uk (@sculove) on CodePen.

우리가 jQuery를 바꿀 수는 없을까?

jQuery는 확장을 지원한다.

jQuery는 hook 이라는 확장을 지원한다

jQuery.fn.animate은 hook 외에도 많은 확장을 지원한다.

jQuery Animation 확장하기

• animation option 사용하기 (API)
• jQuery hook 이용하기
• Animation 확장하기

jQuery.fx.Animate Flow 더 자세히 보기

jQuery Animation 확장하기

• animation option 사용하기 : options.start/step/progress/complete/done/fail/always
• jQuery hook 이용하기 : Tween.propHooks, jQuery.fx.step
• Animation 확장하기 : jQuery.Animation.prefilter/tweener

다시... 문제로 돌아와서

display와 overflow 속성은 애니메이션 도중 jQuery가 바꾼다는데......?

어디를 확장하면 좋을까요?

jQuery.Animation.prefilter

// defaultPrefilter 이후에 호출
jQuery.Animation.prefilter( function( element, props, opts ) {
  if(opts.overflow) {
    $(element).css("overflow", "visible");
  }
});

See the Pen jQuery.fn.animate overflow issue - solved by son chan uk (@sculove) on CodePen.