Jquery Animation

유형 메서드 설명
Basic .hide() 선택한 요소를 숨깁니다.
.show() 선택한 요소를 보여줍니다.
.toggle() ♥ 선택한 요소를 숨김/보여줍니다.
Fading .fadeIn() 선택한 요소를 천천히 보여줍니다.
.fadeOut() 선택한 요소를 천천히 숨김니다.
.fadeto() 선택한 요소를 투명도를 조절합니다.
.fadeToggle() 선택한 요소를 천천히 숨김/보여줍니다.
Sliding .slideDown() 선택한 요소를 슬라이딩으로 보여줍니다.
.slideToggle() 선택한 요소를 슬라이딩으로 숨김/보여줍니다.
.slideUp() 선택한 요소를 슬라이딩으로 숨김니다.
custom .animate() ♥ 선택한 요소에 애니메이션을 적용합니다.
.clearQueue() 선택한 요소에 첫 번째 큐만 실행하고 대기 중인 큐는 모두 삭제합니다.
.delay() 선택한 요소의 애니메이션 효과를 지연합니다.
.dequeue() 선택한 요소 스택에 쌓인 큐를 모두 제거합니다.
.finish() 선택한 요소의 진행중인 애니메이션을 강제로 종료합니다.
.queue() 선택한 요소 스택에 대기 중인 큐를 반환하거나 추가할 수 있습니다.
.stop() 선택한 요소의 실행중인 애니메이션을 정지합니다.

문법

$("selector").animate(properties);
$("selector").animate(properties,duration);
$("selector").animate(properties,duration,easing);
$("selector").animate(properties,duration,easing ,colback);

propertis:border, margin, padding, width, height, font-size, bottom, left, top, right, line-height
transform(x)

//폰트 사이즈를 현재크기에서 20px로 2초동안 애니메이션
$("선택자").animate({"font-size":"20px"},2000);
$("선택자").animate({font-size:"20px"},2000);
//선택한 요소를 왼쪽, 오른쪽 마진값을 100px을 600밀리세컨드 동안 애니메이션
$("선택자").animate({marginLeft:100, marginRight:100},600);
$("선택자").animate({marginLeft:100, marginRight:100},"slow");

Basic

Animation Start

<script>
    let button = $(".btn.btn1");
    let circle = $(".circle.circle1");

    let boxW = $(".box").width();
    let boxH = $(".box").height();
    console.log(boxW);
    let circleW = circle.width();
    let circleH = circle.height();
    console.log(circleW);

    let calcW = boxW - circleW;
    let calcH = boxH - circleH;
    button.click(function () {
        let target = circle;
        target.animate({ left: calcW }, 1000).animate({ top: calcH}, 1000).animate({left: "0"}, 1000).animate({top: "0"}, 1000);
    })
<script>

Timing-function

Animation swing easeInExpo easeOutExpo easeInOutCubic easeOutQuint 

<script>
    //두 번째 버튼을 클릭했을 때 클릭한 글씨를 출력하세요
    let button2 = $(".btn.btn2");
    button2.click(function () {
        let target = $(this).text();
        // alert(target);
        console.log(target);
        
        circle2.animate({left:calcW},1000,target).animate({top:calcH},1000,target).animate({left:"0"},1000,target).animate({top:"0"},1000,target);
    })
<script>

Delay

Animation start 

<script>

<script>

Width

Animation start 

<script>

<script>

Direction

Animation right left bottom top 

<script>

<script>

Loop

Animation start 

<script>

<script>

SetInterval

Animation start 

<script>

<script>

Disappear

Animation start 

<script>

<script>

H.W

Animation start 

<script>

<script>