jQuery 사용자 정의 애니메이션 기능

jQuery 애니메이션 - animate() 메서드

jQuery animate() 메서드는 사용자 정의 애니메이션을 만드는 데 사용됩니다.

구문:

$(selector).animate({params},speed,callback);

필수 params 매개변수는 애니메이션을 구성하는 CSS 속성을 정의합니다.

선택적 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

선택적 콜백 매개변수는 애니메이션이 완료된 후 실행될 함수의 이름입니다.

다음 예에서는 왼쪽 속성이 250픽셀이 될 때까지 <div> 요소를 왼쪽으로 이동하는 animate() 메서드의 간단한 적용을 보여줍니다.

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>

<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("div").animate({left:'250px'});  
  });  
});  
</script>  
</head>  
<body>  
<button>开始动画</button>  
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>  
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">  
</div>  
</body>  
</html>

QQ截图20161024092524.png

팁: 기본적으로 모든 HTML 요소는 고정된 위치이므로 이동할 수 없습니다. 위치에 대해 작업하려면 먼저 요소의 CSS 위치 속성을 상대, 고정 또는 절대로 설정해야 합니다!

jQuery animate() - 여러 속성 조작

애니메이션 생성 프로세스 중에 여러 속성을 동시에 사용할 수 있습니다.

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>  
 
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("div").animate({  
      left:'250px',  
      opacity:'0.5',  
      height:'150px',  
      width:'150px'  
    });  
  });  
});  
</script>  
</head>  
<body>  
<button>开始动画</button>  
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>  
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">  
</div>  
</body>

QQ截图20161024092556.png

팁: animate() 메서드를 사용할 수 있습니다. 그러나 모든 CSS 속성을 조작하려면 기억해야 할 중요한 사항이 하나 있습니다. animate()를 사용할 때 모든 속성 이름은 Camel 표기법을 사용하여 작성해야 합니다. 예를 들어 padding-left 대신 paddingLeft를 사용해야 하고 margin- 대신 marginRight를 사용해야 합니다. 맞아요 등등 또한 핵심 jQuery 라이브러리에는 컬러 애니메이션이 포함되어 있지 않습니다. 컬러 애니메이션을 생성해야 하는 경우 jQuery.com에서 컬러 애니메이션 플러그인을 다운로드해야 합니다.

jQuery animate() - 상대 값 사용 

상대 값을 정의할 수도 있습니다(값은 요소의 현재 값에 상대적입니다). 값 앞에 += 또는 -=를 추가해야 합니다.

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("div").animate({  
      left:'250px',  
      height:'+=150px',  
      width:'+=150px'  
    });  
  });  
});  
</script>  
</head>  
<body>  
<button>开始动画</button>  
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>  
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">  
</div>  
</body>  
</html>

QQ截图20161024092620.png

jQuery animate() - 사전 정의된 값 사용 

속성 값을 "표시", "숨기기" 또는 "전환"으로 애니메이션할 수도 있습니다.

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("div").animate({  
      height:'toggle'  
    });  
  });  
});  
</script>  
</head>  
<body>  
<button>开始动画</button>  
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>  
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">  
</div>  
</body>  
</html>

QQ截图20161024092639.png

jQuery animate() - 대기열 기능 사용

기본적으로 jQuery는 애니메이션을 위한 대기열 기능을 제공합니다. 즉, 여러 개의 animate() 호출을 차례로 작성하면 jQuery는 해당 메서드 호출을 포함하는 "내부" 대기열을 생성합니다. 그런 다음 이러한 애니메이션 호출을 하나씩 실행합니다.

예: 서로 다른 애니메이션을 연이어 수행하고 싶다면 대기열 기능을 활용하고 싶습니다

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    var div=$("div");  
    div.animate({height:'300px',opacity:'0.4'},"slow");  
    div.animate({width:'300px',opacity:'0.8'},"slow");  
    div.animate({height:'100px',opacity:'0.4'},"slow");  
    div.animate({width:'100px',opacity:'0.8'},"slow");  
  });  
});  
</script>  
</head>  
<body>  
<button>开始动画</button>  
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>  
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">  
</div>  
</body>  
</html>

QQ截图20161024092702.png

지속적인 학습

새로운 파일

<!doctype html> <html lang="zh"> <head> <meta charset="utf-8"/> <title>jQuery Animation - fadeTo </title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script> $(document).ready(function() { $("#divPop").animate( { "opacity": "hide", "width": $(window).width()-100 , "height": $(window).height()-100 }, 2000 ); }); </script> </head> <body> <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; width: 300px; height: 100px; position:absolute;"> <div style="text-align: center;">pop div</div> </div> </body> </html>

제출하다 코드 재설정

자동운전