애니메이션 문법

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

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

Animation01

animation

01
const leftWidth = $(".sample").width() - 100;
const leftHeight = $(".sample").height() - 140;
$("#intro1 > button").click(function(){
    $(".animation01")
        .animate({left: "100%"},1000)
        .animate({top: "100%"},1000)
        .animate({left: "0%"},1000)
        .animate({top: "0%"},1000);
});

Animation02 - easing

animation

02
$("#intro2 > button").click(function(){
    let ease = $(this).text();
    $(".animation02")
    .animate({left: leftWidth},1000, ease)
    .animate({top: leftHeight},1000, ease)
    .animate({left: "0%"},1000, ease)
    .animate({top: "0%"},1000, ease);
});

Animation03-delay

animation

03
04
05
06
$("#intro3 > button").click(function(){
    $(".timing.bg3 > div").eq(0).delay(100).animate({left: leftWidth},1000, "easeInCubic").animate({left:0},500)
    $(".timing.bg3 > div").eq(1).delay(200).animate({left: leftWidth},1000, "easeInCubic").animate({left:0},500)
    $(".timing.bg3 > div").eq(2).delay(300).animate({left: leftWidth},1000, "easeInCubic").animate({left:0},500)
    $(".timing.bg3 > div").eq(3).delay(400).animate({left: leftWidth},1000, "easeInCubic").animate({left:0},500)       
});

Animation04-click

animation

07
$("#intro4 > button").eq(0).click(function(){
$(".animation07").animate({left: "+=5%",width:"+=10",height:"+=10"},"slow","easeInOutQuart");
});
$("#intro4 > button").eq(1).click(function(){
    $(".animation07").animate({left: "-=5%",width:"-=10",height:"-=10"},"slow","easeInOutQuart");
});
$("#intro4 > button").eq(2).click(function(){
    $(".animation07").animate({top: "-=5%", borderRadius: "+=5%"},"slow","easeInOutQuart");
});
$("#intro4 > button").eq(3).click(function(){
    $(".animation07").animate({top: "+=5%", borderRadius: "-=5%"},"slow","easeInOutQuart");
});

Animation05-무한 애니메이션

animation

08
$("#intro5 > button").click(function(){
    loop();
});

function loop(){
    $(".animation08")
        .animate({left: leftWidth},"fast")
        .animate({top: leftHeight},"fast")
        .animate({left: "0%"},"fast")
        .animate({top: "0%"},"fast",loop);
}

Animation06-일정한 시간 애니메이션

animation

09
$("#intro6 > button").click(function(){
    time();
    setInterval(time, 4000);   
});
function time(){
    $(".animation09")
        .animate({left: leftWidth},500,"easeOutQuint")
        .animate({top: leftHeight},500,"easeOutQuint")
        .animate({left: "0%"},500,"easeOutQuint")
        .animate({top: "0%"},500,"easeOutQuint");
}

Animation07-사라지는 애니메이션

animation

10
$("#intro7 > button").click(function(){
    $(".animation10") 
        .animate({left: leftWidth},500,"easeOutQuint")
        .animate({top: leftHeight},500,"easeOutQuint")
        .animate({left: "0%"},500,"easeOutQuint")
        .animate({top: "0%"},500,"easeOutQuint"); 
    setTimeout(out,4000);
});
function out(){
        $(".animation10").clearQueue().hide();
}

Animation08-콜백 함수

animation

11
$("#intro8 > button").click(function(){
    $(".animation11")
        .animate({left: leftWidth},500,"easeOutQuint")
        .animate({top: leftHeight},500,"easeOutQuint")
        .animate({left: "0%"},500,"easeOutQuint")
        .animate({top: "0%"},500,"easeOutQuint",function(){
            alert("도착");
        }); 
});