jQuery.animate() 함수 사용 예에 ​​대한 자세한 설명

animate() 함수는 CSS 속성을 기반으로 사용자 정의 애니메이션을 수행하는 데 사용됩니다.

일치하는 요소에 대해 CSS 스타일을 설정할 수 있으며 animate() 함수는 현재 스타일에서 지정된 CSS 스타일로 전환 애니메이션을 수행합니다.

예를 들어 div 요소의 현재 높이가 100px이고 CSS 높이 속성이 200px로 설정된 경우 animate()는 div 요소의 높이를 100px에서 200px로 점진적으로 늘리는 전환 애니메이션을 수행합니다.

이 함수는 jQuery 객체(인스턴스)에 속합니다.

Syntax

이 함수는 jQuery 1.0의 새로운 기능입니다. animate() 함수는 주로 다음 두 가지 사용법을 가집니다.

Usage 1:

jQueryObject.animate( cssProperties [, Duration ] [, easing ] [, Complete ] )

Usage 2:

jQueryObject.animate( cssProperties , options )

사용법 2는 사용법 1의 변형입니다. 필수 옵션 매개변수를 객체 형태로 지정합니다(사용법 1보다 더 많은 옵션 매개변수를 지정할 수 있습니다).

Parameter

매개변수 설명

cssProperties Object 클래스 Object 객체는 하나 이상의 CSS 속성의 키-값 쌍으로 구성됩니다.

duration 선택사항/문자열/숫자 유형은 애니메이션이 실행되는 시간(밀리초 수)을 지정하며 기본값은 400입니다. 이 매개변수는 string"fast"(=200) 또는 "slow"(=600)일 수도 있습니다.

easing 옵션/문자열 유형은 사용할 애니메이션 효과를 지정합니다. 기본값은 "스윙"이며 "선형" 또는 기타 사용자 정의 애니메이션 스타일 기능으로 설정할 수도 있습니다.

complete Option/Function 유형 요소는 해당 기능이 표시된 후에 실행되어야 합니다. 함수 내의 이는 현재 DOM 요소를 가리킵니다.

options 개체 유형으로 지정된 옵션 매개변수 개체입니다.

매개변수 옵션 개체는 다음 속성을 식별할 수 있습니다(다음 속성은 선택 사항임).

속성 속성 설명

duration 매개변수 기간을 참조하세요.

easing 매개변수 완화를 참조하세요.

complete 매개변수 완료를 참조하세요.

queue 부울 유형은 애니메이션을 효과 대기열에 넣을지 여부를 나타내며 기본값은 true입니다. 버전 1.7부터 이 매개변수는 지정된 이름을 가진 효과 대기열에 넣는 데 사용되는 문자열이 될 수 있습니다. 지정한 대기열이 자동으로 시작되지 않으면 dequeue("queueName")를 수동으로 호출하여 대기열을 시작해야 합니다.

또한 jQuery 1.4 및 1.8에는 매개변수 옵션에 대한 새로운 옵션 지원이 많이 추가되었지만 이러한 매개변수는 일반적으로 사용되지 않으므로 자세한 내용은 jQuery 공식 문서를 참조하세요.

반환 값

animate()함수의 반환 값은 jQuery 유형이며 현재 jQuery 개체 자체를 반환합니다.

예제 및 설명

아래 언급된 값을 제외하고 모든 애니메이션 CSS 속성은 단일 값으로 변경될 수 있어야 합니다. 기본 jQuery 기능을 사용하면 대부분의 숫자가 아닌 CSS 속성을 사용하여 애니메이션을 수행할 수 없습니다. 예를 들어 width, height, left, top은 모두 애니메이션에 사용할 수 있지만 색상, Background-color는 애니메이션에 사용할 수 없습니다(jQuery.Color() 플러그인을 사용하지 않는 한). 속성 값의 단위(예: px, em, %)를 지정하지 않는 한 기본값 단위는 픽셀(px)입니다.

테두리, 여백 등 CSS 단축 속성은 완전히 지원되지 않을 수 있으므로 사용하지 않는 것이 좋습니다.

CSS 속성 값을 "show", "hide", "toggle"과 같은 특정 문자열로 설정할 수도 있으며 jQuery는 이 속성의 기본 애니메이션 형식을 호출합니다.

또한 CSS 속성 값은 상대적일 수도 있습니다. 속성 값 앞에 "+=" 또는 "-="를 붙여 원래 속성 값에서 지정된 값을 늘리거나 줄일 수 있습니다. 예를 들어, { "height": "+=100px" }는 원래 높이에 100px를 추가한다는 의미입니다.

다음 초기 HTML 코드를 참조하세요:

a8dd71fc29d112c025bfe5e53c348f7bCodePlayer16b28748ea4df4d9c2150843fecfba68

animation 효과:

<select id="animation">
    <option value="1">动画1</option>
    <option value="2">动画2</option>
    <option value="3">动画3</option>
    <option value="4">动画4</option>
    <option value="5">动画5</option>
</select>
<input id="exec" type="button" value="执行动画" >

다음은 animate() 함수의 구체적인 사용법을 보여주기 위해 animate() 함수와 관련된 jQuery 샘플 코드입니다.

$("#exec").click( function(){
    var v = $("#animation").val();
    var $myDiv = $("#myDiv");
    if(v == "1"){
        // 数值的单位默认是px
        $myDiv.animate( { height: 200 } );
    }else if(v == "2"){
        // 在现有高度的基础上增加300px (如果原来是100px，增加后就是400px)
        // 多个动画连续执行
        $myDiv.animate( { height: "+=300px" }, "slow" ); 
        $myDiv.animate( { width: "50%" }, 1000 );       
        $myDiv.animate( { width: "200px", height: "100px" }, 1000 );        
    }else if(v == "3"){
        // font-size或fontSize均可，由多个单词构成的属性均是如此
        $myDiv.animate( { fontSize: "30px" }, 2000 );
        $myDiv.animate( { fontSize: "14px" }, 2000, function(){
            alert("动画3执行完毕!");
        });
    }else if(v == "4"){
        $myDiv.animate( { width: "50%", height: "50%" }, { duration: 2000, easing: "linear" });
    }else if(v == "5"){
        // 根据高度切换显示/隐藏，显示时高度从0增加到原高度，隐藏时高度从原高度减小到0
        $myDiv.animate( { height: "toggle" });
    }   
} );

위 내용은 jQuery.animate() 함수 사용 예에 ​​대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!