jQuery animation

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

Animation

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

properties : border, margin, padding, width, height, font-size, bottom, left, top, right, line-heigth
transfome(x)

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

Animation01

animation 

$(".btn1").click(function(){
    //calc(100% - 80px); 
   $(".circle1")
    .animate({left: leftWidth}, 1000)
    .animate({top: "80%"}, 1000)
    .animate({left: "0%"}, 1000)
    .animate({top: "0%"}, 1000);
});

Animation02 - timing-function

animation 

$(".btn2 > button").click(function(){
    let easing = $(this).text()

    $(".circle2")
    .animate({left: leftWidth}, 1000, easing)
    .animate({top: "80%"}, 1000, easing)
    .animate({left: "0%"}, 1000, easing)
    .animate({top: "0%"}, 1000, easing);
});

Animation03 - delay

animation 

$(".circle3 > div").css({"position":"relative","margin-bottom":"30px"});

let ease = "easeInElastic";

$(".btn3 > button").click(function(){
    $(".circle3 > div").eq(0).delay(100).animate({left: leftWidth}, 1000, ease).animate({left:"0"}, 1000);
    $(".circle3 > div").eq(1).delay(200).animate({left: leftWidth}, 1000, ease).animate({left:"0"}, 1000);
    $(".circle3 > div").eq(2).delay(300).animate({left: leftWidth}, 1000, ease).animate({left:"0"}, 1000);
    $(".circle3 > div").eq(3).delay(400).animate({left: leftWidth}, 1000, ease).animate({left:"0"}, 1000);
});

Animation04 - width

animation 

$(".circle4 > div").css({"position":"relative","margin-bottom":"30px"});
$(".circle4").css("height","220px");

$(".btn4 > button").click(function(){
    $(".circle4 > div:eq(0)")
    .animate({left: leftWidth, width:"100px", height: "220px"}, 1000)
    .animate({left:"0", width: "60px", height: "50"}, 1000);

    $(".circle4 > div:eq(1)")
    .animate({left: leftWidth}, 1000, "easeInElastic")
    .slideUp()
    .slideDown()
    .animate({left: "0"}, 1000, "easeInElastic");

    $(".circle4 > div:eq(2)")
    .animate({left: leftWidth, borderRadius: "0%"}, 1000, "easeInElastic")
    .animate({height: 300, opacity: 0.5}, "slow", "easeInElastic")
    .animate({width: 300, opacity: 1, borderRadius: "30%"}, "normal", "easeInElastic")
    .animate({height: 50, width: 50, borderRadius: "50%"}, 1000, "easeInElastic")
    .animate({left: 0}, 1000, "easeInElastic");
});

Animation05 - click

animation 

$(".btn5-1").click(function(){
    $(".circle5 > div").animate({left: "+=100"}, "slow", "easeInOutQuart")
});
$(".btn5-2").click(function(){
    $(".circle5 > div").animate({left: "-=100"}, "slow", "easeInOutQuart")
});
$(".btn5-3").click(function(){
    $(".circle5 > div").animate({top: "-=100"}, "slow", "easeInOutQuart")
});
$(".btn5-4").click(function(){
    $(".circle5 > div").animate({top: "+=100"}, "slow", "easeInOutQuart");
});

Animation06 - infinite

animation 

$(".btn6 > button").click(function(){
    loop();
});

function loop() {
    $(".circle6 > div")
    .animate({left: leftWidth}, 1000, "easeInElastic")
    .animate({left: 0}, 1000, "easeInElastic", loop);
};

Animation07 - 일정한 간격으로 움직이기

animation 

$(".btn7").click(function(){
    setInterval(time, 5000);
});
function time() {
    $(".circle7 > div")
    .animate({left: leftWidth}, 1000, "easeInBack")
    .animate({left: 0}, 1000, "easeInBack");
};

Animation08 - disappear

animation 

$(".btn8").click(function(){
    $(".circle8 > div")
    .animate({left: leftWidth}, 1000, "easeInBack")
    .animate({left: 0}, 1000, "easeInBack")

    setTimeout(out, 2000);
});

function out() {
    $(".circle8 > div").hide()
};

Animation09

animation 

//Animation09  애니메이션(2바퀴) - 무한 - 10분 뒤 사라지게
$(".btn9 > button").click(function(){
    function loop() {
        $(".circle9 > div")
        .animate({left: leftWidth}, 1000, "easeInElastic")
        .animate({left: 0}, 1000, "easeInElastic", loop)
    }
    function out() {
        $(".circle9 > div").hide();
    }
    loop()
    setTimeout(out, 100000);
});