[jQuery] fadeIn 패이드 효과, 해당 화면 서서히 나타내기

jQuery 함수중에 fadeIn 과 fadeOut 를 이용하면 일종의 애니메이션 화면처럼 서서히 나타나게 하거나, 서서히 사라지게 할 수 있다. 

속성에 숫자를 바꾸면 그 효과 강도를 세밀하게 나타낼 수도 있다.

 

01

소스를 대략 정리해 보았다.

 

<div>
    <a href="javascript:displayChk('1');" id="introd_project1_q1">
        <img src="introd_project1_q1.png" alt="">
    </a>
    <a href="#" style="display:none;" id="introd_project1_a1">
        <img src="introd_project1_a1.png" alt="">
    </a>
</div>
<div>
    <a href="javascript:displayChk('2');" id="introd_project1_q2">
        <img src="introd_project1_q2.png" alt="">
    </a>
    <a href="#" style="display:none;" id="introd_project1_a2">
        <img src="introd_project1_a2.png" alt="">
    </a>
</div>
 
 
<script>
function displayChk(no) {
    document.getElementById("introd_project1_q" + no).style.display = "none";
    //$('#introd_project1_a'+ no).show('slow');
    $('#introd_project1_a'+ no).fadeIn(450);
    //document.getElementById("introd_project1_a" + no).style.display = "block";
}
</script>