이 간단한 슬라이딩 패널을 사용하고 싶습니다. JQuery와 패널

대신 패널은이 간단한 슬라이딩 패널을 사용하고 싶습니다. JQuery와 패널

<title>Simple Slide Panel</title> 

    <script type="text/javascript" src="jquery.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function(){ 

     $(".btn-slide").click(function(){ 
      $("#panel").slideToggle("slow"); 
      $(this).toggleClass("active"); return false; 
     }); 


    }); 
    </script> 

    <style type="text/css"> 
    body { 
     margin: 0 auto; 
     padding: 0; 
     width: 570px; 
     font: 75%/120% Arial, Helvetica, sans-serif; 
    } 
    a:focus { 
     outline: none; 
    } 
    #panel { 
     background: #754c24; 
     height: 200px; 
     display: none; 
    } 
    .slide { 
     margin: 0; 
     padding: 0; 
     border-top: solid 4px #422410; 
     background: url(images/btn-slide.gif) no-repeat center top; 
    } 
    .btn-slide { 
     background: url(images/white-arrow.gif) no-repeat right -50px; 
     text-align: center; 
     width: 144px; 
     height: 31px; 
     padding: 10px 10px 0 0; 
     margin: 0 auto; 
     display: block; 
     font: bold 120%/100% Arial, Helvetica, sans-serif; 
     color: #fff; 
     text-decoration: none; 
    } 
    .active { 
     background-position: right 12px; 
    } 
    </style> 
    </head> 

    <body> 

    <div id="panel"> 
     <!-- you can put content here --> 
    </div> 

    <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p> 

    </body> 
    </html>

출처

2011-01-18 MyHeadHurts

이 this

편집을 시도 내가 잘 감사 왼쪽에서 가고 싶은 내려오고 :

다윗이 좋은 제안에 댓글을 달았습니다. jQuery의 장점은 요소의 속성을 애니메이션화하는 것입니다. 슬라이드 업/다운/토글은 요소의 높이를 움직입니다. 너비는 움직일 수있는 또 다른 속성이며 이후에 가로 슬라이드 효과를 줄 것입니다. 내가 게시 한 링크는 예제가있는 기사입니다.

출처

2011-01-18 21:42:39 n8wrl

... 여기에 '이것이 무엇'인지 설명하는 실제 답변을 게시 해보세요. –

내가 tryed 'this'나는 내 문제가 더 많이 생각한다. 왜냐하면 내가 asp.net 페이지를 아약스와 함께 사용하고 있기 때문이다. – MyHeadHurts

tryed avve는 모든 패널을 업데이트 패널과 함께 사용하지 않았다. – MyHeadHurts

이 간단한 슬라이딩 패널을 사용하고 싶습니다. JQuery와 패널

답변

관련 문제