JS jQuery Animation(JS 제이쿼리 애니메이션)

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

.animate()

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

properties는 애니메이션의 속성과 값을 설정합니다.

properties에 올 수 있는 값:
border, margin, padding, height, width, font-size, bottom, left, top, right, line-height; properties에 올 수 없는 값:
background-color, transform

속성 표기 방법

//폰트 사이즈를 현재 크기에서 20px로 2초동안 애니메이션 합니다. $("selector").animate({"font-size":"20px"},2000); $("selector").animate({fontSize:"20px"},2000); //선택한 요소의 왼쪽 오른쪽 마진값을 100px로 600밀리세컨드 동안 애니메이션 합니다. $("selector").animate({marginLeft:100, marginRight:100},600); $("selector").animate({"margin-left":"100px", "margin-right":"100px"},"slow"); //선택한 요소의 현재 위치를 기준으로 오른쪽으로 2초마다 20px만큼 이동한 후, 콜백함수를 호출합니다. $("selector").animate({left:"+=20"},2000,function(){});

.animate()

기본적인 애니메이션입니다.

Start

Circle

$(".btn3").click(function(){ $(".box3 > .circle")     .animate({ left: "80%" },1000)     .animate({ top: "50%" },500)     .animate({ left: "0%" },1000)     .animate({ top: "0" },1000); });;

timimg-function

제이쿼리 애니메이션 움직임 효과입니다.

linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce

Circle

$(".btn-wrap > span").click(function(e){     e.preventDefault();      var easing = $(this).attr("data-easing");     $(".box4 > .circle")         .animate({ left: "80%" },500, easing)         .animate({ top: "50%" },500, easing)         .animate({ left: "0%" },500, easing)         .animate({ top: "0%" },500, easing); });

.delay()

제이쿼리 Delay 효과입니다.

Start

Circle

Circle

Circle

Circle

$(".box5 > div").css("position","relative"); $(".btn5").click(function(e){     e.preventDefault();     $(".box5 > div").eq(0).delay(100).animate({left:"90%"},1000,"easeOutCirc").animate({left:"0"},1000);     $(".box5 > div").eq(1).delay(200).animate({left:"90%"},1000,"easeOutCirc").animate({left:"0"},1000);     $(".box5 > div").eq(2).delay(300).animate({left:"90%"},1000,"easeOutCirc").animate({left:"0"},1000);     $(".box5 > div").eq(3).delay(400).animate({left:"90%"},1000,"easeOutCirc").animate({left:"0"},1000); });

.stop()

제이쿼리 정지 효과입니다.

Start Stop Back

Circle

$(".btn6-1").click(function(){     $(".box6").animate({ left: "90%" },3000, "easeOutCirc").animate({ left:"0" },3000); }); $(".btn6-2").click(function(e){  e.preventDefault();     $(".box6").stop(); }); $(".btn6-3").click(function(e){  e.preventDefault();     $(".box6").animate({ left:"0" },3000); });

$("selector").stop(clearQueue, goToEnd) clearQueue : 큐에 대기 중인 효과들을 삭제할 것인지 여부를 결정합니다.(삭제: true, 기본값: false);
goToEnd : 진행 중인 애니메이션을 완료 할 것인지 여부를 결정합니다.
(true이면 현재 징행 중인 애니메이션 종료 시점으로 이동하고, false(기본)이면 스톱이 진행된 지점에서 멈추고 끝납니다.)

• .stop(true, true) : 현재 진행되고 있는 효과는 정지되면서 효과는 맨 마지막으로 즉시 이동 한 후 큐에 남아 있는 효과는 모두 지우고 끝납니다.
• .stop(true, false) : 현재 징행되고 있는 효과는 즉시 그 지점에서 정지되고 남아 있는 효과는 모두 지우고 끝냅니다.
• .stop(false, true) : 현재 진행되고 있는 효과는 정지되면서 맨 마지막으로 즉시 이동한 후 큐에 남아 있는 효과를 수행합니다.
• .stop(false, false) : 현재 진행되고 있는 효과는 즉시 그 지점에서 정지되고 큐에 남아 있는 효과를 수행합니다.

go .stop(true, true) .stop(true, false) .stop(false, true) .stop(false, false)

stop

stop

stop

stop

$(".box7 > div").css("position","relative"); $(".btn7-1").click(function(e){  e.preventDefault();     $(".box7 > div").animate({left:"90%"},3000,"easeOutCirc").animate({left:"0"},3000); }); $(".btn7-2").click(function(e){  e.preventDefault();     $(".box7 > div").eq(0).stop(true, true); }); $(".btn7-3").click(function(e){  e.preventDefault();     $(".box7 > div").eq(1).stop(false, true); }); $(".btn7-4").click(function(e){  e.preventDefault();     $(".box7 > div").eq(2).stop(true, false); }); $(".btn7-5").click(function(e){  e.preventDefault();     $(".box7 > div").eq(3).stop(false, false); });

.finish()

제이쿼리 정지 효과입니다.

Start finish

Circle

$(".btn8-1").click(function(){     $(".box8 > div").animate({left:"90%"},3000,"easeOutCirc"); }); $(".btn8-2").click(function(e){  e.preventDefault();     $(".box8 > div").finish(); });;

Animation 1: width

가로 값을 변경한 애니메이션입니다.

Start

Circle

$(".btn9").click(function(e){  e.preventDefault();     $(".box9 > div").animate({left:"80%", width:"150px"},1000,"easeOutCirc")     $(".box9 > div").animate({left:"0%", width:"90px"},1000,"easeOutCirc"); });

Animation 2: SlideToggle

슬라이딩 효과를 이용한 애니메이션입니다.

Start

Circle

$(".btn10").click(function(e){  e.preventDefault();     $(".box10 > div")         .animate({ left: "90%" },1000, "easeOutCirc")         .slideUp()         .slideDown()         .animate({ left: "0"},1000, "easeOutCirc"); });

Animation 3: Opacity

투명도 효과를 이용한 애니메이션입니다.

Start

ain

$(".btn11").click(function(e){  e.preventDefault();     $(".box11 > div")         .animate({ left: "60%", width: 300, height: 300, opacity: 0.5 },1000, "easeOutCirc")         .animate({ left: "0", width: 90, height: 90, opacity: 1 },1000, "easeOutCirc") });

Animation 4: border-radius

border-radius 효과를 이용한 애니메이션입니다.

Start

ain

$(".btn12").click(function(e){  e.preventDefault();     $(".box12 > div")         .animate({ left: "60%", borderRadius:"0%"},1000,"easeOutQuint")         .animate({ height:300, opacity:0.5 },"slow","easeOutQuint")         .animate({ width:300, opacity:0.5, borderRadius:"50%" },"normal","easeOutQuint")         .animate({ width:90, opacity:1, borderRadius:"0%" },"fast","easeOutQuint")         .animate({ height:90, opacity:1 },1000,"easeOutQuint")         .animate({ left: 0, borderRadius:"50%" },1000,"easeOutQuint"); });

Animation 5: border-width

border-width 효과를 이용한 애니메이션입니다.

Start

ain

$(".btn13").click(function(e){  e.preventDefault();     $(".box13 > div")         .animate({ borderWidth: 100},"slow","easeOutQuint")         .animate({ borderWidth: 0},"slow","easeOutQuint") });

Animation 6: 클릭하면 이동하는 애니메이션

클릭하면 이동하는 애니메이션입니다.

right left top bottom

circle

$(".btn14-1").click(function(e){  e.preventDefault();     $(".box14 > div").animate({ left: "+=100" },"slow","easeOutQuint"); }); $(".btn14-2").click(function(e){  e.preventDefault();     $(".box14 > div").animate({ left: "-=100" },"slow","easeOutQuint"); }); $(".btn14-3").click(function(e){  e.preventDefault();     $(".box14 > div").animate({ top: "-=100" },"slow","easeOutQuint"); }); $(".btn14-4").click(function(e){  e.preventDefault();     $(".box14 > div").animate({ top: "+=100" },"slow","easeOutQuint"); });

Animation 7: 무한 반복 애니메이션

무한 반복하는 애니메이션입니다.

start

circle

$(".btn15").click(function(e){  e.preventDefault();     loop(); }); function loop(){     $(".box15 > div").animate({ left:"85%" },500,"easeOutQuint").animate({ left:"0%" },500,"easeOutQuint",loop); };

Animation 8: 일정한 시간(4초) 애니메이션

일정한 시간(4초)으로 실행되는 애니메이션입니다.

start

circle

$(".btn16").click(function(e){  e.preventDefault();     setInterval (time,4000); });  function time(){     $(".box16 > div").animate({ left:"+=200" },500,"easeOutQuint").animate({left:"-=50"},500,"easeOutQuint"); }

Animation 9: 사라지는 애니메이션

일정한 시간(4초)이 지나면 사라지는 애니메이션입니다.

start

circle

$(".btn17").click(function(e){  e.preventDefault();     $(".box17 > div").animate({ left:"85%" },1000,"easeOutQuint").animate({ left:"0" },1000,"easeOutQuint");     setTimeout(out,4000) });  function out(){     $(".box17").clearQueue().hide(); }

Animation 10: 시간차 애니메이션

일정한 시간 간격으로 표현되는 애니메이션입니다.

start

circle

circle

circle

circle

circle

$(".btn18").click(function(e){  e.preventDefault();     $(".box18 > div").each(function(index){         $(this).delay(index*200).animate({ left:"85%" },1000,"easeOutQuint").animate({ left:"0" },1000,"easeOutQuint");     }); });

Animation 11: 토글 애니메이션

토글 효과를 이용한 애니메이션입니다.

start

circle

$(".btn19").click(function(e){  e.preventDefault();     $(".box19 > div").animate({ height:"toggle", opacity:"toggle" },"fast","easeOutQuint"); });

Animation 13: 콜백함수

콜백함수를 이용한 애니메이션입니다.

start

circle

$(".btn20").click(function(e){  e.preventDefault();     $(".box20 > div").animate({left: "85%"},1000,"easeOutQuint",function(){         alert("도착");     }); });

Animation 14: 창작 애니메이션

창작 애니메이션입니다.

start

circle

$(".btn21").click(function(e){  e.preventDefault();     $(".box21 > div")         .animate({ left: "0%", borderRadius:"0%"},1000,"easeOutQuint")         .animate({left: "-40%", borderRadius:"20%"},1500,"easeOutBounce")         .animate({ left:"40%" , borderRadius:"40%"},1500,"easeOutBounce").animate({ left:"0" },1000,"easeOutQuint")         .animate({ width: 90, opacity:1, borderRadius:"50%" , opacity: 0.7 },"slow","easeOutCirc")         .animate({ left: "-0%", width: 150, height: 150, opacity: 0.3 ,borderRadius:"50%"},1500, "easeOutCirc")         .animate({ left: "0%", width: 90, height: 90, opacity: 1 },1000, "easeOutQuint") });