카테고리 없음

JS Animation

inystardust 2019. 3. 7. 09:43


jQuery Animation

jQuery Animation v1.0 </doc>

webstoryboy.co.kr

ANIMAITON

유형 메서드 설명
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: "60%" },1000)
    .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: "55%" },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(){
   $(".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
$(".box7 > div").css("position","relative");
$(".btn7-1").click(function(){
   $(".box7 > div").animate({ left: "90%" },1000, "easeOutCirc").animate({ left:"0" },1000);
});
$(".btn7-2").click(function(){
   $(".box7 > div").eq(0).stop(true, true);
});
$(".btn7-3").click(function(){
   $(".box7 > div").eq(1).stop(true, false);
});
$(".btn7-4").click(function(){
   $(".box7 > div").eq(2).stop(false, true);
});
$(".btn7-5").click(function(){
   $(".box7 > div").eq(3).stop(false, false);
});

$("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

.finish()

제이쿼리 finish 효과입니다.

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

Animation1 : width

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

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

Animation2 : slideToggle

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

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

Animation3 : opacity

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

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

Animation4 : border-radius

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

Start
ain
$(".btn12").click(function(){
    $(".box12 > div")
        .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

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

Start
ain
$(".btn13").click(function(){
    $(".box13 > div")
        .animate({ left: "50%"},1000,"easeOutQuint")
        .animate({ borderWidth: 100},"slow","easeOutQuint")
        .animate({ borderWidth: 0},"slow","easeOutQuint")
        .animate({ left: 0 },1000,"easeOutQuint");
});

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

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

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

Animation7 : 무한 반복 애니메이션

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

start
circle
//무한 반복
$(".btn15").click(function(){
    loop();
});

function loop(){
    $(".box15 > div").animate({ left:"85%" },1000,"easeOutQuint").animate({ left:"0" },1000,"easeOutQuint",loop);
}

Animation8 : 일정한 시간

일정한 시간 애니메이션입니다.

start
circle
//일정한 시간
$(".btn16").click(function(e){
    setInterval(time, 4000);
});

function time(){
    $(".box16 > div").animate({ left:"+=100" },500,"easeOutQuint").animate({ left:"-=50"},500,"easeOutQuint");
}

Animation9 : 사라지는 애니메이션

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

start
circle
//사라지는 애니메이션
$(".btn17").click(function(e){
    $(".box17 > div").animate({ left:"85%" },1000,"easeOutQuint").animate({ left:"0" },1000,"easeOutQuint");
    setTimeout(out,4000)
});

function out(){
    $(".box17").clearQueue().hide();
}

Animation10 : 시간차 애니메이션

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

start
circle
circle
circle
circle
circle
//시간차 애니메이션
$(".btn18").click(function(e){
    $(".box18 > div").each(function(index){
        $(this).delay(index*200).animate({ left:"85%" },1000,"easeOutQuint").animate({ left:"0" },1000,"easeOutQuint");
    });
});

Animation11 : 토글 애니메이션

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

start
circle
//토글 애니메이션
$(".btn19").click(function(e){
    $(".box19 > div").animate({ height:"toggle", opacity:"toggle" },"fast","easeOutQuint");
});

Animation13 : 마음대로

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

start
circle
//마음대로