jQuery에서 slideDown과 slideUp 메서드 사용 사례

이제 예제와 함께 jQuery의 slidedown과 slideup 메서드의 사용법을 요약하고 분석했습니다. 여러분께 공유하여 참고해 주세요. 다음과 같습니다:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    *{font-size:12px;}
    div{width:600px;margin:auto;}
    #control{background-color:gold;padding:10px;margin-bottom:10px;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#btnslideDown").click(function () {
        $("#message").slideDown();1000);
      });
      $("#btnslideUp").click(function () {
        $("#message").slideUp();1000);
      });
      //*****예시1
      //      $("#btnToggle").click(function () {
      //        $("#message").slideToggle();1000);
      //      });
      //*****예시2 애니메이션 함수는 콜백 함수를 전달할 수 있습니다. 즉, 애니메이션이 완료되면 이 함수가 실행됩니다.
      $("#btnToggle").click(function () {
        $("#message").slideToggle();1000, function () {
          alert('제작이 완료되었습니다!');
        });
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnslideDown" type="button" value="展开div" />
    <input id="btnslideUp" type="button" value="收起div" />
    <input id="btnToggle" type="button" value="切换" />
  </div>
  <div id="message">
    mouseover와 mouseenter의 차이: div 안에 div가 들어 있습니다. 주석을 참조하세요. 이벤트 버블링과 관련이 있습니다.<br /> 
    마우스 포인터가 선택된 요소나 그 자식 요소를 통과할 때마다 mouseover 이벤트가 발생합니다 <br />
    마우스 포인터가 선택된 요소를 통과할 때만 mouseenter 이벤트가 발생합니다(자식 요소를 통과할 때는 발생하지 않습니다).
  </div>
</body>
</html>

jQuery와 관련된 더 많은 내용에 대해 관심이 있는 독자는 다음 주제를 확인할 수 있습니다: 《jQuery 창 조작 기술 요약》、《jQuery 드래그 앤 드롭 효과 및 기술 요약》、《jQuery 일반 플러그인 및 사용 방법 요약》、《jQuery에서 Ajax 사용 요약》、《jQuery 테이블(table) 조작 기술 요약》、《jQuery 확장 기술 요약》、《jQuery 일반 클래식 효과 요약》、《jQuery 애니메이션 및 효과 사용 방법 요약》 및 《jQuery 선택자 사용 요약》

이 문서에서 설명한 내용이 jQuery 프로그램 설계에 도움이 되길 바랍니다.

선언: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권자는 누구인지 알 수 없습니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 사이트는 소유권을 가지지 않으며, 인공적인 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해 내용이 있음을 발견하면, notice#w로 이메일을 보내 주세요.3codebox.com（메일 보내기 때, #을 @으로 바꾸세요. 신고를 하고, 관련 증거를 제공하세요. 사실이 확인되면, 이 사이트는 즉시 의심스러운 저작권 내용을 삭제합니다。）

기본 강의