jQuery 효과 - 애니메이션

animate() 메서드

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

구문:

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>向右移动</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

참고:

기본적으로 모든 HTML 요소는 정적 위치를 가지며 이동할 수 없습니다.
위치를 조작해야 하는 경우 먼저 요소의 CSS 위치 속성을 상대, 고정 또는 절대로 설정하는 것을 잊지 마세요!

animate() - 여러 속성 조작

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.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>逐渐变大</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

animate() 메서드를 사용하여 모든 CSS 속성을 조작할 수 있나요?
네, 거의 다 됐어요! 그러나 기억해야 할 중요한 사항이 하나 있습니다. animate()를 사용할 때 모든 속성 이름을 작성하려면 Camel 표기법을 사용해야 합니다. 예를 들어 padding-left 대신 paddingLeft를 사용해야 하고 margin-right 대신 marginRight를 사용해야 합니다. . 또한 핵심 jQuery 라이브러리에는 컬러 애니메이션이 포함되어 있지 않습니다.

animate() - 상대 값 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 
</head>
 <body>
<button>开始动画</button>
<br><br>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});
</script> 
</head>
 <body>
<button>开始动画</button>
<p>收起</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

animate() - 대기열 기능 사용

기본적으로 jQuery는 애니메이션에 대한 대기열 기능을 제공합니다.

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.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></p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("button:first").click(function() { $("#block").animate({ left: "-=80px" //相对左移 }, 300); }); $("button:last").click(function() { $("#block").animate({ left: "+=80px" //相对右移 }, 300); }); }); </script> <style type="text/css"> div { background-color: #FFFF00; height: 40px; width: 80px; border: 1px solid #000000; margin-top: 15px; padding: 15px; text-align: center; position: absolute; } </style> </head> <body style="margin-left:200px;"> <button><--GO</button> <button>Go--></button> <div id="block">动画！</div> </body> </html>

제출하다 코드 재설정

자동운전