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);

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

//폰트 사이즈를 현재 크기에서 20px로 2초동안 애니메이션
$("선택자").animate({"font-size":"20px"},2000);
$("선택자").animate({fontSize:"20px"},2000);

//선택한 요소를 왼쪽, 오른쪽 마진값을 100px을 600밀리세컨드 동안 애니메이션
$("선택자").animate({marginLeft:100, marginRight:100},600);
$("선택자").animate({marginLeft:100, marginRight:100},"slow");

Animation

animation Start

let boxWidth = $(".box").width();
let circleWidth = $(".circle").width();
let leftwidth = boxWidth - circleWidth

$(".btn1").click(function(){
    $(".circle1").animate({left:"80%"},1000)
    .animate({top:"80%"},1000)
    .animate({left:"0%"},1000)
    .animate({top:"0%"},1000)
})

timing-function

animation 

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

    $(".circle2")
    .animate({ left:leftwidth},1000, easing)    //easing : 움직임
    .animate({ top:"83%" },1000, easing)
    .animate({ left:"0%" },1000,easing)
    .animate({ top:"0%" },1000, easing)
})

delay

animation 

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

let ease = "easeInOutCirc"

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

width

animation 

//circle6의 하이트 값을 초기화해주세요
$(".circle6").css("height","210px");

//버튼을 클릭 했을 때 circle6을 오른쪽 이동시켜주세요!
$(".circle6 > div").css({"position":"relative", "margin-bottom":"30px"});

$(".btn6").click(function(){
$(".circle6 > div:eq(0)").animate({left : leftwidth, width:"150px", height :"300px" },1000,ease)
.animate({left:"0",width:"50px", height :"50px"},1000)

$(".circle6 > div:eq(1)")
.animate({left :leftwidth },1000,"easeOutCirc")
.slideUp()
.slideDown()
.animate({left :"0" },1000,"easeOutCirc")

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

click

animation 

$(".btn7-1").click(function(){
    $(".circle7 > div").animate({ left: "+=100px"},"slow", "easeOutQuint");
});
$(".btn7-2").click(function(){
    $(".circle7 > div").animate({ left: "-=100px"},"slow", "easeOutQuint");
});
$(".btn7-3").click(function(){
    $(".circle7 > div").animate({ top: "-=100px"},"slow", "easeOutQuint");
});
$(".btn7-4").click(function(){
    $(".circle7 > div").animate({ top: "+=100px"},"slow", "easeOutQuint");
});

무한 반복

animation 

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

function loop(){
    $(".circle8 > div")
    .animate({ left : leftwidth },1000 , "easeOutQuint")
    .animate({ left : 0 },1000 , "easeOutQuint",loop);
}

일정간격으로 움직이기

animation 

$(".btn9").click(function(){
setInterval(time, 5000)    //setInterva : 일정한 간격으로 움직이는 것
})

function time (){
$(".circle9 > div")
.animate({ left : leftwidth },1000 , "easeOutQuint")
.animate({ left : 0 },1000 , "easeOutQuint");
}

사라지는 애니메이션

animation 

$(".btn10").click(function(){
    $(".circle10 > div")
    .animate({ left : leftwidth },1000 , "easeOutQuint")
    .animate({ left : 0 },1000 , "easeOutQuint");

    setTimeout(out, 2000)
})

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

창작

animation 

$(".btn11").click(function(){ 
function loop(){
    $(".circle11 > div")
    .animate({ left : leftwidth },1000 , "easeOutQuint")
    .animate({ left : 0 },1000 , "easeOutQuint",loop);
}
    function out(){
    $(".circle11 > div").hide()}
    loop()
    setTimeout(out, 5000)
});