개발/AJAX

[Ajax] slideDown(), 슬라이드 효과로 보이기

sarah.together 2018. 2. 22. 00:20
반응형

.slideDown( [duration] [, callback] )Returns : jQuery


개요 : 슬라이딩을 해서 요소를 보이게 합니다.


 slideDown( duration [, callback] )

  • duration 시간 값
  • callback 콜백 함수
  • .slideDown( [duration] [, easing] [, callback] )
  • duration 시간 값
  • easing 특수한 효과 함수
  • callback 콜백 함수


    • .slideDown() 함수는 요소의 height 값을 조작해서 움직임을 만들어 냅니다. 시간값(Duration)의 기본값은 밀리세컨드이고, 값이 크면 느린 효과가 나타납니다. 물론 반대는 빨라지겠죠. 'fast' 와 'slow' 문자열을 지원하는데, 각각은 200 과 600 밀리세컨드를 의미합니다.

    이미지를 예로 보겠습니다.


     <div id="clickme">
      Click here
    </div>
    <img id="book" src="book.png" alt="" width="100" height="123" />


     $('#clickme').click(function() {
      $('#book').slideDown('slow', function() {
        // Animation complete.
      });
    });


    시작과 끝 효과 ( Easing )

    .animate() 인자 중에 남은 하나는 속도 늦추는 함수(easing function)에 대한 내용입니다. 이 easing 함수는 속도에 대한 내용입니다. 움직임이 한쪽 끝에 닿았을때 처리되는 행동패턴에 대한 내용입니다. jQuery에서 easing 은 기본으로 swing 을 사용합니다. swing은 끝점에 가서 속도가 살짝 느려집니다. 또 하나는 속도를 그대로 유지하는 linear 입니다. easing 함수들을 정상적으로 사용하려면 plug-ins 들이 필요합니다. 대부분 jQuery UI suite 쪽에 정의되어 있습니다.

    콜백 함수 ( Callback Function )

    애니메이션이 완료된 후 사용될 콜백함수입니다. 이 콜백함수는 인자를 전달할 수 없지만, this 를 이용하여 애니메이션이 일어난 요소 자체를 전달할 수는 있습니다. 만일 여러개의 요소에 움직임 효과를 주었다면 각각의 애니메이션 효과가 일어난 뒤에 개별적으로 콜백함수가 실행이 됩니다.


    jQuery 1.6 버전부터는, deferred.done() 와 함께 .promise() 함수를 사용하여 모든 움직임이 끝난 후 한번만 콜백함수를 실행할 수 있게 되었습니다. ( .promise() 함수 예제 링크 ).

    .slideDown() 을 포함하여 모든 jQuery effect 들은, 글로벌 세팅인 jQuery.fx.off = true로 조절할 수 있습니다. 더 많은 정보를 원하시면 jQuery.fx.off를 참고하십시오.


    예 제  

    모든 div를 슬라이드 다운합니다.


     <!DOCTYPE html>
    <html>
    <head>
      <style>
    div { background:#de9a44; margin:3px; width:80px; 
    height:40px; display:none; float:left; }
    </style>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
      Click me!
    <div></div>
    <div></div>
    <div></div>
    <script>
    $(document.body).click(function () {
    if ($("div:first").is(":hidden")) {
    $("div").slideDown("slow");
    } else {
    $("div").hide();
    }
    });

    </script>

    </body>
    </html>



    미리보기

    <iframe src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/09.14.01.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="width: 100%; height: 180px;"></iframe>

    스르륵 내려옵니다.



    예 제  
    모든 input 을 슬라이드 다운합니다. 움직임이 완료되면 가운데 input 요소에 포커스를 줍니다.


     <!DOCTYPE html>
    <html>
    <head>
      <style>
    div { background:#cfd; margin:3px; width:50px; 
    text-align:center; float:left; cursor:pointer;
    border:2px outset black; font-weight:bolder; }
    input { display:none; width:120px; float:left; 
    margin:10px; }
    </style>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
      <div>Push!</div>
    <input type="text" />
    <input type="text" class="middle" />

    <input type="text" />
    <script>
    $("div").click(function () {
    $(this).css({ borderStyle:"inset", cursor:"wait" });
    $("input").slideDown(1000,function(){
    $(this).css("border", "2px red inset")
    .filter(".middle")
    .css("background", "yellow")
    .focus();
    $("div").css("visibility", "hidden");
    });
    });

    </script>

    </body>
    </html>



    미리보기

    <iframe style=" marginwidth=">0" marginheight="0" frameborder="0" scrolling="no" src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/09.14.02.html" px="px">

    스르륵 내려온 뒤 포커스가 갑니다. 왠지 유용해 보입니다.

     

    슬라이드 기능은 기존 웹에서는 거의 구현하지 못하는 기능이었습니다. 이제는 함수 하나로 되는 세상이네요. 매번 얘기하지만 jQuery 감사~~.

    그럼 즐프하세요.



    ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.





    반응형