JS-Animation

$("selectior").animate(properties)
properties : border, margin, padding, height, font-size, bottom, left, top, right, line-height, opacity, border-readius (transformX)

Effect

Property Description
.hide() 선택한 요소를 숨깁니다.
.show() 선택한 요소를 보여줍니다.
.toggle() 선택한 요소를 숨김/보여줍니다.
.fadeIn() 선택한 요소를 천천히 보여줍니다.
.fadeOut() 선택한 요소를 천천히 숨깁니다.
.fadeTo() 선택한 요소의 투명도를 조절합니다.
.fadeToggle() 선택한 요소의 숨김/노출을 천천히 합니다.
.slideDown() 선택한 요소를 슬라이딩으로 보여줍니다.
.slideUp() 선택한 요소를 슬라이딩으로 숨깁니다.
.slideToggle() 선택한 요소를 슬라이딩으로 숨깁/보여줍니다.

Animation

Property Description
.animation() 선택한 요소에 애니메이션을 적용합니다.
.clearQueue() 선택한 요소에 애니메이션을 첫 번째 큐만 실행하고 나머지 대기 중인 큐는 모두 삭제합니다.
.delay() 선택한 요소에 애니메이션을 지연합니다.
.dequeue() 스택에 쌓인 큐를 모두 제거합니다.
.finish() 선택한 요소의 진행중인 애니메이션을 강제로 종료합니다.
.queue() 선택한 요소 스택에 대기 중인 큐를 반환하거나 추가 할 수 있습니다.
.stop() 실행 중인 애니메이션을 정지합니다.

Timing-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

fuction

.animate() Start

function
$(".btn2").on("click",function(){
	$(".box2")
	.animate ({left:"90%"},1000)
	.animate ({top:"70%"},1000)
	.animate ({left:"0%"},1000)
	.animate ({top:"70%"},1000);
});

.delay() Start

delay
delay
delay
delay
$(".btn3").on("click",function(){
	$(".box3>div").eq(0).delay(100).animate({ left: "90%" },1000,"easeOutCirc").animate({ left:"0"},1000);
	$(".box3>div").eq(1).delay(200).animate({ left: "90%" },1000,"easeOutCirc").animate({ left:"0"},1000);
	$(".box3>div").eq(2).delay(300).animate({ left: "90%" },1000,"easeOutCirc").animate({ left:"0"},1000);
	$(".box3>div").eq(3).delay(400).animate({ left: "90%" },1000,"easeOutCirc").animate({ left:"0"},1000);
});

.stop() Go Stop Back

stop
$("selector").stop(clearQueue, goToEnd)
clearQueue : 큐에 대기 중인 효과들을 삭제할 것인지 여부를 결정합니다.(삭제 : true, 기본값 : false)
goToEnd : 진행중인 애니메이션을 완료할 것인지 결정합니다.
(true이면 현재 진행중인 애니메이션 종료 시점으로 이동하고, false이면 스톱이 진행된 시점에서 멈추고 끝납니다.)
  • .stop(true,true) : 일단 현재 진행되고 있는 효과는 정지되면서 효과의 맨 마지막으로 즉시 이동한 후 큐에 남아있는 효과는 모두 지우고 끝납니다.
  • .stop(true,false) : 일단 현재 진행되고 잇는 효과는 즉시 그 지점에서 정지되고 남아 있는 효과는 모두 지우고 끝냅니다.
  • .stop(false,true) : 일단 현재 진행되고 있는 효과는 정지되면서 효과의 맨 마지막으로 즉시 이동한 후 큐에 남아있는 효과를 수행합니다.
  • .stop(false,false) : 일단 현재 진행되고 있는 효과는 즉시 그 지점에서 정지되고, 큐에 남아있는 효과를 수행합니다.

.stop() Go .stop(true,true) .stop(true,false) .stop(false,true) .stop(false,false)

stop
stop
stop
stop
$(".btn5-1").on("click",function(){
	$(".box5 > div").animate({left:"90%"},8000).animate({left:"0"},8000);
});
$(".btn5-2").on("click",function(){
	$(".box5 > div").eq(0).stop(true,true);
});
$(".btn5-3").on("click",function(){
	$(".box5 > div").eq(1).stop(true,false);
});
$(".btn5-4").on("click",function(){
	$(".box5 > div").eq(2).stop(false,true);
});
$(".btn5-5").on("click",function(){
	$(".box5 > div").eq(3).stop(false,false);
});

.finish() Go .finish

stop
$(".btn6-1").on("click",function(){
	$(".box6").animate({left:"90%"},8000);
});
$(".btn6-2").on("click",function(){
	$(".box6").finish();
});

animation : 가로 변경 애니메이션 start

stanimation
$(".btn7").on("click",function(){
	$(".box7")
		.animate({ left: "90%", width:"150" },1000,"easeOutQuint")
		.animate({ left: "0", width:"90" },1000,"easeOutQuint");
});

animation2 : 슬라이딩 애니메이션 start

animation
$(".btn8").on("click",function(){
	$(".box8")
		.animate({ left: "90%"},1000,"easeOutQuint")
		.slideUp()
		.slideDown()
		.animate({ left: "0" },1000,"easeOutQuint");
});

animation3 : 투명도 애니메이션 start

animation
$(".btn9").on("click",function(){
	$(".box9")
		.animate({ left: "90%", width:300, height:300, opacity:0.5},1000,"easeOutQuint")
		.animate({ left: "0", width:90, height:90, opacity:1 },1000,"easeOutQuint");
});

animation4 : border-redius 애니메이션 start

animation
$(".btn10").on("click",function(){
	$(".box10")
		.animate({ left: "70%", 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");
});

animation5 : border-width 애니메이션 start

animation
$(".btn11").on("click",function(){
	$(".box11")
		.animate({ left: "50%"},1000,"easeOutQuint")
		.animate({ borderWidth: 100},"slow","easeOutQuint")
		.animate({ borderWidth: 0},"fast","easeOutQuint")
		.animate({ left: 0 },1000,"easeOutQuint");
});

animation6 : border-width 애니메이션 start

animation
$(".btn12").on("click",function(){
	$(".xbox12")
		.animate({ borderWidth: 100},"slow","easeOutQuint")
		.animate({ borderWidth: 0},"slow","easeOutQuint")
});

animation7 : 클릭하면 이동하는 애니메이션 go back

animation
$(".btn13-1").on("click",function(){
	$(".box13")
		.animate({ left: "+=100"},"slow","easeOutQuint")
});
$(".btn13-2").on("click",function(){
	$(".box13")
		.animate({ left: "-=100"},"slow","easeOutQuint")
});

animation8 : 무한반복 하는 애니메이션 go

animation
$(".btn14").on("click",function(){
	loop();
});

function loop(){
	$(".box14").animate({left:"90%"},1000,"easeOutQuint").animate({left:"0"},1000,loop);
}

animation9 : 일정한 시간으로 실행하는 애니메이션 go

animation
$(".btn15").on("click",function(){
	setInterval(time, 2000);
});
function time(){
	$(".box15").animate({left:"+=200"},500,"easeOutQuint").animate({left:"-=100"},500,"easeOutQuint");
}

animation10 : 일정한 시간이 지나면 사라지는 애니메이션 go

animation
$(".btn16").on("click",function(){
	$(".box16").animate({ left: "90%" },1000,"easeOutQuint").animate({ left: "0" },1000,"easeOutQuint");
	setTimeout(out, 2000);
});
function out(){
	$(".box16").clearQueue().hide();
}

animation11 : 시간차 애니메이션 go

animation
animation
animation
animation
animation
$(".btn17").on("click",function(){
	$(".box17 > div").each(function(index){
		$(this).delay(index*500).animate({left:"90%"},500,"easeOutQuint").animate({left:"0"},500,"easeOutQuint");
	});
});

animation12 : 토글 애니메이션 go

animation
$(".btn18").on("click",function(){
	$(".box18").animate({height:"toggle",opacity:"toggle"},"fast","easeOutQuint");
});

animation13 : 콜백함수 go

animation
$(".btn19").on("click",function(){
	$(".box19").animate({ left:"90%", opacity:"0.1" },"slow","easeOutQuint",function(){
		alert("도착");
	});
});

animation14 : 내가만든 애니메이션 go

animation
animation
$(".btn20").on("click",function(){
	loop();
});
function loop(){
	$(".box20")
	.animate({left:"90%"},"slow","easeInQuint",loop)
	.animate({top:"15%"},"fast","easeInQuint",loop)
	.animate({left:"0%"},"slow","easeInQuint",loop)
	.animate({top:"30%"},"fast","easeInQuint",loop)
	.animate({left:"90%"},"slow","easeInQuint",loop)
	.animate({top:"45%"},"fast","easeInQuint",loop)
	.animate({left:"0%"},"slow","easeInQuint",loop)
	.animate({top:"60%"},"fast","easeInQuint",loop)
	.animate({left:"90%"},"slow","easeInQuint",loop)
	.animate({top:"75%"},"fast","easeInQuint",loop)
	.animate({left:"0%"},"slow","easeInQuint",loop)
	.animate({top:"90%"},"fast","easeInQuint",loop)
	.animate({left:"100%"},"slow","easeInQuint",loop)
	.animate({top:"-10%"},"fast","easeOutBounce",loop)
	.animate({left:"-10%"},"slow","easeOutBounce",loop)
	.animate({top:"0%"},"fast","easeOutBounce",loop)
	.animate({left:"0%"},"slow","easeOutBounce",loop)
}