jQuery 애니메이션

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

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

구문:

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

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

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

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

다음 예제에서는 animate() 메서드의 간단한 적용을 보여줍니다. <div> 요소를 오른쪽으로 250픽셀 이동합니다.

Example

<!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>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

프로그램을 실행하고 시도해 보세요.

팁: 기본적으로 모든 HTML 요소는 고정 위치를 가지며 움직일 수 없습니다. . 변경해야 하는 경우 요소의 위치 속성을 상대, 고정 또는 절대로 설정해야 합니다!

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',
                    opacity:'0.5',
                    height:'150px',
                    width:'150px'
                });
            });
        });
    </script>
</head>
<body>
<button>开始动画</button>
<div style="background:#4ae936;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

프로그램을 실행하여 사용해 보세요

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>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

프로그램을 실행하고 사용해 보세요

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({
                    height:'toggle'
                });
            });
        });
    </script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

프로그램을 실행하고 사용해 보세요

jQuery 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>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

프로그램을 실행하고 사용해 보세요

다음 예에서는 <div> 요소를 오른쪽으로 100픽셀 이동한 다음 텍스트의 글꼴 크기를 늘립니다.

<!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({left:'100px'},"slow");
                div.animate({fontSize:'3em'},"slow");
            });
        });
    </script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>

프로그램을 실행하고 사용해 보세요

지속적인 학습

새로운 파일

<!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> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>

제출하다 코드 재설정

자동운전