jQuery
jQuery.animate () 메서드

통사론

1. (선택자) .animate ({스타일}, {옵션})

매개 변수

콜백 애니메이션

때로는 단어 위치를 한 위치에서 다른 위치로 변경하거나 단어의 크기를 줄이고 자동으로 단어 색상을 변경하여 Google 웹 사이트 또는 웹 앱의 매력을 향상시켜야합니다. JQuery는 fadeIn(), hide(), slideDown() 사용하여이 개념을 많이 사용하지만 기능은 제한되어 있으며 할당 된 특정 작업 만 수행했습니다.

Jquery는 놀랍고 유연한 .animate() 메서드를 제공하여이 문제를 해결합니다. 이 메서드를 사용하면 경계를 넘을 수있는 권한을 부여하는 CSS 속성에 사용되는 사용자 지정 애니메이션을 설정할 수 있습니다. 예를 들어 CSS 스타일 속성에 width:200; DOM 요소의 현재 위치는 50입니다. animate 메서드는 지정된 CSS 값에서 현재 위치 값을 줄이고 해당 요소를 150으로 애니메이션합니다. 그러나 애니메이션 엔진이 처리하므로이 부분에 대해 신경 쓸 필요가 없습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $("#btn1").click(function(){
        $("#box").animate({width: "200px"});
    });
</script>

<button id="btn1">Animate Width</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>

.animate() 메소드를 허용하는 CSS 스타일 속성 목록.

backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing,  wordSpacing, lineHeight, textIndent, 

.animate() 메소드에 지정된 속도.

milliseconds (Ex: 100, 1000, 5000, etc.), 
"slow", 
"fast"

.animate() 메소드에 지정된 완화.

다음은 복잡한 애니메이션 옵션이있는 몇 가지 예입니다.

예 : 1 :

$( "#book" ).animate({
  width: [ "toggle", "swing" ],
  height: [ "toggle", "swing" ],
  opacity: "toggle"
 }, 5000, "linear", function() {
    $( this ).after( "<div>Animation complete.</div>" );
});

예 : 2 :

  $("#box").animate({
     height: "300px",
     width: "300px"
     }, {
     duration: 5000,
     easing: "linear",
     complete: function(){
        $(this).after("<p>Animation is complete!</p>");
     }
  });