[J] JavaScript & jQuery 공부하기 #30

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.

 

35. slide와 fade

  * slide() 메소드
    - slideUp() : 요소 영역을 위로 올림
    - slideDown() : 요소 영역을 아래로 내림
    < script type="text/javascript">
        $("요소").slideUp();
        $("요소").slideDown();
    </ script>

  * fade() 메소드
    - fadeIn() : 요소 영역이 나타나게 함
    - fadeOut() : 요소 영역이 사라지게 함
    < script type="text/javascript">
        $("요소").fadeIn();
        $("요소").fadeOut();
    </ script>

  * slideUp()과 slideDown()메소드 이용 효과
    - 이벤트를 발생시킬 버튼과 슬라이드 될 문장을 정의
    < body>
        < button id = "slide_up">위로</ button>
        < button id = "slide_down">아래로</ button>
        < p>안녕!</ p>
    </ body>

    - 문장이 올라가고 내려가는 코드 블록을 정의한다
    < script type="text/javascript">
        $(document).ready(function(){
            $("#slide_up").click(function(){
                $("p").slideUp();
            });
            $("#slide_down").click(function(){
                $("p").slideDown();
            });
        });
    </ script>

   * fadeIn()과 fadeOut()메소드 이용 효과
    - 이벤트를 발생시킬 버튼과 사라지고 나타날 문장을 정의한다
    < body>
        < button id ="fade_out">사라지기</ button>
        < button id ="fade_in">나타나기</ button>
        < p>방가워</ p>
    </ body>

    - 문장이 사라지고, 나타나는 실행문을 정의함
    < script type="text/javascript">
        $(document).ready(function(){
            $("#fade_out").click(function(){
                $("p").fadeOut();
            });
            $("#fade_in").click(function(){
                $("p").fadeIn();
            });
        });
    </ script>