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, heigth, 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,marginRgiht:100},600);
$("선택자").animate({marginLeft:100,marginRgiht:100},"slow");

Animation

Animation 

$(".btn1").click(function () {
    $(".circle1")
    .animate({left:"90%"}, 1000)
    .animate({top:"90%"}, 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)
    .animate({top: "90%"}, 1000, easing)
    .animate({left: "0%"}, 1000, easing)
    .animate({top: "0%"}, 1000, easing);
});

delay

Animation 

$(".circle5 > div").css({"position":"relative","margin-bottom":"30px"});
let ease = "easeOutElastic";
 $(".btn5 > button").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").css("height","220px");
$(".circle6 > div").css({"position":"relative","margin-bottom":"30px"});
                
$(".btn6").click(function(){
    $(".circle6 > div:eq(0)")
    .animate({left:leftWidth,width:"150px",height:"300px"},1000)
    .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},"solw","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:"+=-100"},"solw","easeOutQuint")
}); 
$(".btn7-2").click(function(){
    $(".circle7 > div").animate({left:"+=100"},"solw","easeOutQuint")
});
$(".btn7-3").click(function(){
    $(".circle7 > div").animate({top:"+=-100"},"solw","easeOutQuint")
});
$(".btn7-4").click(function(){
    $(".circle7 > div").animate({top:"+=100"},"solw","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)
});
                    
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