jQuery Animation
$("selector").animate(properties);
$("selector").animate(properties, duration);
$("selector").animate(properties, duration, easing);
$("selector").animate(properties, duration, easing, collback);
유형 | 메서드 | 설명 |
---|---|---|
Basic | .hide() | 선택한 요소를 숨깁니다. |
.show() | 선택한 요소를 보여줍니다. | |
.toggle() ♥ | 선택한 요소를 숨김/보여줍니다. | |
Fading | .fadeIn() | 선택한 요소를 천천히 보여줍니다. |
.fadeOut() | 선택한 요소를 천천히 숨김니다. | |
.fadeto() | 선택한 요소를 투명도를 조절합니다. | |
.fadeToggle() | 선택한 요소를 천천히 숨김/보여줍니다. | |
Sliding | .slideDown() | 선택한 요소를 슬라이딩으로 보여줍니다. |
.slideToggle() | 선택한 요소를 슬라이딩으로 숨김/보여줍니다. | |
.slideUp() | 선택한 요소를 슬라이딩으로 숨김니다. | |
custom | .animate() ♥ | 선택한 요소에 애니메이션을 적용합니다. |
.clearQueue() | 선택한 요소에 첫 번째 큐만 실행하고 대기 중인 큐는 모두 삭제합니다. | |
.delay() | 선택한 요소의 애니메이션 효과를 지연합니다. | |
.dequeue() | 선택한 요소 스택에 쌓인 큐를 모두 제거합니다. | |
.finish() | 선택한 요소의 진행중인 애니메이션을 강제로 종료합니다. | |
.queue() | 선택한 요소 스택에 대기 중인 큐를 반환하거나 추가할 수 있습니다. | |
.stop() | 선택한 요소의 실행중인 애니메이션을 정지합니다. |
Animation01
animation
01
$("#intro1 > button").click(function(){
$(".animation01")
.animate({left: "100%"},1000)
.animate({top: "100%"},1000)
.animate({left: "0%"},1000)
.animate({top: "0%"},1000);
});
Animation02 - easing
animation
02
$("#intro2 > button").click(function(){
let ease = $(this).text();
$(".animation02")
.animate({left: leftWidth},1000, ease)
.animate({top: leftHeight},1000, ease)
.animate({left: "0%"},1000, ease)
.animate({top: "0%"},1000, ease);
});
Animation03 - delay
animation
03
04
05
06
$("#intro3 > button").click(function(){
$(".timing.bg3 > div").eq(0).delay(100).animate({left: leftWidth},1000, "easeInCubic").animate({left: 0},500);
$(".timing.bg3 > div").eq(1).delay(200).animate({left: leftWidth},1000, "easeInCubic").animate({left: 0},500);
$(".timing.bg3 > div").eq(2).delay(300).animate({left: leftWidth},1000, "easeInCubic").animate({left: 0},500);
$(".timing.bg3 > div").eq(3).delay(400).animate({left: leftWidth},1000, "easeInCubic").animate({left: 0},500);
});
Animation04 - click
animation
07
$("#intro3 > button").click(function(){
$(".timing.bg3 > div").eq(0).delay(100).animate({left: leftWidth},1000, "easeInCubic").animate({left: 0},500);
$(".timing.bg3 > div").eq(1).delay(200).animate({left: leftWidth},1000, "easeInCubic").animate({left: 0},500);
$(".timing.bg3 > div").eq(2).delay(300).animate({left: leftWidth},1000, "easeInCubic").animate({left: 0},500);
$(".timing.bg3 > div").eq(3).delay(400).animate({left: leftWidth},1000, "easeInCubic").animate({left: 0},500);
});
$("#intro4 > button").eq(0).click(function(){
$(".animation07").animate({left: "+=5%", width: "+=10", height: "+=10"}, "slow", "easeInOutQuart");
});
$("#intro4 > button").eq(1).click(function(){
$(".animation07").animate({left: "-=5%", width: "-=10", height: "-=10"}, "slow", "easeInOutQuart");
});
$("#intro4 > button").eq(2).click(function(){
$(".animation07").animate({top: "-=5%", borderRadius: "+=5%"}, "slow", "easeInOutQuart");
});
$("#intro4 > button").eq(3).click(function(){
$(".animation07").animate({top: "+=5%", borderRadius: "-=5%"}, "slow", "easeInOutQuart");
});
Animation05 - 무한 애니메이션
animation
08
function loop(){
$(".animation08")
.animate({left: leftWidth},"fast")
.animate({top: leftHeight},"fast")
.animate({left: "0%"},"fast")
.animate({top: "0%"},"fast", loop);
}
Animation06 - 일정한 시간 애니메이션
animation
09
$("#intro6 > button").click(function(){
setInterval(time, 4000);
});
function time(){
$(".animation09")
.animate({left: leftWidth},500,"easeOutQuint")
.animate({top: leftHeight},500,"easeOutQuint")
.animate({left: "0%"},500,"easeOutQuint")
.animate({top: "0%"},500,"easeOutQuint")
;
}
Animation07 - 사라지는 애니메이션
animation
10
$("#intro7 > button").click(function(){
$(".animation10")
.animate({left: leftWidth},500,"easeOutQuint")
.animate({top: leftHeight},500,"easeOutQuint")
.animate({left: "0%"},500,"easeOutQuint")
.animate({top: "0%"},500,"easeOutQuint");
setTimeout(out,4000);
});
function out(){
$(".animation10").clearQueue().hide();
}
Animation08 - 콜백 함수
animation
11
$("#intro8 > button").click(function(){
$(".animation11")
.animate({left: leftWidth},500,"easeOutQuint")
.animate({top: leftHeight},500,"easeOutQuint")
.animate({left: "0%"},500,"easeOutQuint")
.animate({top: "0%"},500,"easeOutQuint", function(){
alert("도착");
});
});