어?~ 금지

1. animate()

:제이쿼리 애니메이션 효과

✏️ 문법

$(' 선택자 ').animate({ css스타일 }, 지속시간, 이징, 콜백함수)

✏️ 예시

$('div').animate({left:200, top:200})
$('div').animate({left:200,top:200},'fast','linear',function(){...})

-css 스타일 : 필수이며, 이펙트 효과를 구성할 css스타일 속성을 정의한다.
- 지속 시간: 이펙트 효과가 지속될 시간을 전달한다. (기본값:400 / slow:600, fast:200)
- 시간당 속도 함수 : 이펙트 효과의 시간당 속도를 전달한다.
- 콜백함수 : 이펙트 효과의 동작이 완료된 후에 실행할 함수를 정의한다.

- animate() 메서드 with 콜백함수

✏️ 예시

<script>
$('.btn').click(function(){
$('.box).animate(){
width:'100px,
borderRadius:'5px
},'fast',function(){
$(this).css('backgroundColor','pink');
}
})
</script>

1. width는 100px, borderRadius 는 5px 적용
2. backgroundColor 를 pink로 변경함

- delay() 메서드

: fadeIn() slideDown() 등 효과 메서드나 animate() 메서드를 지연시킬 때 사용

✏️ 문법

$('선택자').delay(시간).animate();

✏️ 예시

<script>
$('.btn').click(function(){
$('.box1').delay(0).animate({width:'100%'},1000);
$('.box2').delay(250).animate({width:'100%'},1000);
$('.box3').delay(500).animate({width:'100%'},1000);
})
</script>