jQuery.fadeIn() 함수 사용법에 대한 자세한 설명

fadeIn() 함수는 페이드인 전환 animation 효과와 함께 일치하는 모든 요소를 ​​표시하는 데 사용됩니다.

페이드인 애니메이션 효과, 즉 요소의 불투명도 비율이 0%에서 100%까지 점차 증가합니다.

요소 자체가 표시되면 변경 사항이 적용되지 않습니다. 요소가 숨겨져 있으면 표시되도록 설정하세요.

이 함수의 반대는 fadeOut() 함수로, 페이드 아웃 전환 애니메이션 효과로 일치하는 모든 요소를 ​​숨기는 데 사용됩니다.

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

Syntax

이 함수는 jQuery 1.0의 새로운 기능입니다. fadeIn() 함수는 주로 다음과 같은 두 가지 형태의 사용법을 가지고 있습니다:

사용법 1: jQuery 1.4.3에서는 매개변수 완화를 새로 지원합니다.

jQueryObject.fadeIn( [ 기간 ] [, 완화 ] [, 완료 ] )

사용법 2:

jQueryObject.fadeIn( 옵션 )

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

Parameters

매개변수 설명

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

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

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

options Object 클래스 유형별로 지정된 옵션 매개변수 개체입니다.

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

속성 속성 설명

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

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

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

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

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

반환 값

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

예제 및 설명

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

e388a4556c0f65e1904146cc1a846beeCodePlayer94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846bee프로그래밍 개발 기술 공유에 집중94b3e26ee717c64999d7867364b1b4a3

페이드 인 디스플레이 효과:

<select id="animation">
    <option value="1">fadeIn( )</option>
    <option value="2">fadeIn( "slow" )</option>
    <option value="3">fadeIn( 3000 )</option>
    <option value="4">fadeIn( 2000, complete )</option>
    <option value="5">fadeIn( 1000, "linear" )</option>
    <option value="6">fadeIn( options )</option>
</select>
<input id="btnFadeIn" type="button" value="显示" > <input id="btnHide" type="button" value="隐藏" >

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

//【显示】按钮
$("#btnFadeIn").click( function(){
    var v = $("#animation").val();
    if( v == "1" ){
        $("p").fadeIn( );       
    }else if(v == "2"){
        $("p").fadeIn( "slow" );    
    }else if(v == "3"){
        $("p").fadeIn( 3000 );  
    }else if(v == "4"){
        $("p").fadeIn( 2000, function(){
            alert("显示完毕!");
        } );    
    }else if(v == "5"){
        $("p").fadeIn( 1000, "linear" );    
    }else if(v == "6"){
        $("p").fadeIn( { duration: 1000 } );    
    }
} );
// 【隐藏】按钮
$("#btnHide").click( function(){
    $("p").hide( );
} );

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