jQuery Animation v1.0 </doc>

ANIMAITON

.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()

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

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

timimg-function

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

$(".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 효과입니다.

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

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

$(".btn6-1").click(function(){
    $(".box6").animate({ left: "90%" },3000, "easeOutCirc").animate({ left:"0" },3000);
});
$(".btn6-2").click(function(){
    $(".box6").stop();
});
$(".btn6-3").click(function(){
    $(".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) : 현재 진행되고 있는 효과는 즉시 그 지점에서 정지되고 큐에 남아 있는 효과를 수행합니다.

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

.finish()

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

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

Animation 1: width

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

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

Animation 2: SlideToggle

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

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

Animation 3: Opacity

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

$(".btn11").click(function(){
    $(".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 효과를 이용한 애니메이션입니다.

$(".btn12").click(function(){
    $(".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 효과를 이용한 애니메이션입니다.

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

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

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

$(".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");
});

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

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

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

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

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

$(".btn16").click(function(e){
    setInterval (time,4000);
});

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

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

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

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

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

Animation 10: 시간차 애니메이션

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

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

Animation 11: 토글 애니메이션

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

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

Animation 13: 콜백함수

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

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

Animation 14: 창작 애니메이션

창작 애니메이션입니다.

$(".btn21").click(function(){
    $(".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")
});