jQuery - 효과 Animation

jQuery 애니메이션 - animate() 메서드

jQuery animate()메서드는 사용자 지정 애니메이션을 만드는 데 사용됩니다.

$(selector).animate({params},speed,callback);

$("button").click(function(){
  $("div").animate({left: '250px'});
});

 

 

 

jQuery animate() - 여러 속성 조작

$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
});

 

 

 

 

jQuery animate() - 상대 값 사용

상대 값을 정의하는 것도 가능합니다(값은 요소의 현재 값을 기준으로 함). 이것은 값 앞에 += 또는 -=를 넣어 수행됩니다.

$("button").click(function(){
  $("div").animate({
    left: '250px',
    height: '+=150px',
    width: '+=150px'
  });
});

 

 

 

jQuery animate() - 미리 정의된 값 사용

show속성의 애니메이션 값을 " ", " hide" 또는 " " 로 지정할 수도 있습니다 toggle.

$("button").click(function(){
  $("div").animate({
    height: 'toggle'
  });
});

 

 

 

 

jQuery animate() - 대기열 기능 사용

즉, 여러 animate()호출을 차례로 작성하면 jQuery가 이러한 메서드 호출로 "내부" 대기열을 생성합니다. 그런 다음 하나의 애니메이션 호출을 실행합니다.

$("button").click(function(){
  var div = $("div");
  div.animate({height: '300px', opacity: '0.4'}, "slow");
  div.animate({width: '300px', opacity: '0.8'}, "slow");
  div.animate({height: '100px', opacity: '0.4'}, "slow");
  div.animate({width: '100px', opacity: '0.8'}, "slow");
});

$("button").click(function(){
  var div = $("div");
  div.animate({left: '100px'}, "slow");
  div.animate({fontSize: '3em'}, "slow");
});