jQuery - 슬라이딩 패널이 표시 될 때 절대적으로 위치한 div의 '왼쪽'위치 애니 메이팅

Question

화면의 왼쪽에서 숨겨진 패널이 있는데이 패널은 왼쪽에있는 '탭'클릭시 뷰로 슬라이드됩니다. 화면. 패널이 기존 페이지 콘텐츠의 맨 위로 슬라이드해야하며 탭을 이동해야합니다. 그래서 둘 다 CSS에 절대적으로 위치하고 있습니다. 모든 것은 잘 작동합니다. 그렇기 때문에 탭이 나올 때 (그리고 탭 컨테이너) 패널이 왼쪽으로 움직여야 패널의 오른쪽에 붙어있는 것처럼 보입니다. 수레를 사용하면 상대적으로 간단하지만 물론 이것은 기존 콘텐츠의 레이아웃에 영향을 미치므로 절대 위치 지정에 영향을줍니다. 나는 패널 컨테이너의 왼쪽 위치에 애니메이션을 적용 해 보았지만 (문서화 된 jquery 함수 참조), 작동시키지 못한다.

이것은 내가 변경 한 원래 코드의 예입니다. 버튼/탭을 어떻게 밀어 낼 수 있습니까?

http://www.iamkreative.co.uk/jquery/slideout_div.html

내 HTML

<div><!--sample page content--> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
    </p> 
</div> 

<div id="panel" class="height"> <!--the hidden panel --> 
    <div class="content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p> 
    </div> 
</div> 

<!--if javascript is disabled use this link--> 
<div id="tab-container" class="height"> 
    <a href="#" onclick="return()"> 
     <div id="tab"><!-- this will activate the panel. --></div> 
    </a> 
</div> 

내 jQuery를

$(document).ready(function(){ 

$("#panel, .content").hide(); //hides the panel and content from the user 

$('#tab').toggle(function(){ //adding a toggle function to the #tab 
    $('#panel').stop().animate({width:"400px", opacity:0.8}, 100, //sliding the #panel to 400px 

    // THIS NEXT FUNCTION DOES NOT WORK --> 
    function() { 
     $('#tab-container').animate({left:"400px"} //400px to match the panel width 
     }); 

    function() { 
     $('.content').fadeIn('slow'); //slides the content into view. 
     }); 
}, 

function(){ //when the #tab is next cliked 
    $('.content').fadeOut('slow', function() { //fade out the content 
     $('#panel').stop().animate({width:"0", opacity:0.1}, 500); //slide the #panel back to a width of 0 
    }); 
    }); 

    }); 

이는 CSS를

#panel { 
position:absolute; 
left:0px; 
top:50px; 
background-color:#999999; 
height:500px; 
display:none;/*hide the panel if Javascript is not running*/ 
} 

#panel .content { 
width:290px; 
margin-left:30px; 
} 

#tab-container{ 
position:absolute; 
top:20px; 
width:50px; 
height:620px; 
background:#161616; 
} 

#tab { 
width:50px; 
height:150px; 
margin-top:100px; 
display:block; 
cursor:pointer; 
background:#DDD; 
} 

많은 감사

Answer 1

처음부터 다시 시작하여 실제로 jQuery 문서를 읽었습니다. 나는 절대적으로 위치 된 div에 패널과 버튼을 둘 다 놓고 양쪽을 떠 다니게했다. 컨테이너를 음의 왼쪽 위치에 놓은 다음 버튼에 jQuery 토글 액션을 추가합니다.

$('#button').toggle(function() { 

    $('#slider').animate({ 
     left: '+=200' 
     }, 458, 'swing', function() { 

     // Animation complete. CALLBACK? 

    }); 

}, function() { 

    $('#slider').animate({ 
     left: '-=200' 
     }, 458, 'swing', function() { 

     // Animation complete. CALLBACK? 

    }); 

}); 

Answer 2

동일한 작업을 수행하려고 할 때이 포스트를 우연히 발견했습니다.

불행히도 Matt의 대답은 더 이상 jQuery의 최신 버전에서 작동하지 않습니다. Matt의 답변이 작성되었을 때 jQuery에는 두 가지 .toggle 함수가있었습니다. 내가 이것을 쓰고있을 때 그의 대답에 활용 된 것은 더 이상 사용되지 않습니다. Matt의 코드가 사용되면 전체 div가 사라지고 버튼과 모두가 사라집니다.

HTML : 내 기능은 다음 코드를 사용하여 작업을 얻을 수 있었다

(당신은 API 문서에 파고의 변화에 ​​대해 알아 찾을 때까지 그리고 당신은 나 같은 경우 매우 혼란 스러울 것이다) :

<div id="siteMap"> 
<div id="mapButton">Site Map</div> 
<div id="theMap">[The Site Map Goes Here]</div> 
</div> 

CSS (I이 아직 매우 깨끗 아니라는 것을 알고) :

#siteMap { 
    width:500px; 
    position:fixed; 
    left:-500px; 
    top:157px; 
    display:block; 
    color:#FFF; 
    z-index:2; 
    opacity: 0.95; 
} 
#siteMap #mapButton { 
    display:block; 
    color:#333; 
    background-color:#ACACAC; 
    padding:2px 5px; 
    height:20px; 
    width:70px; 
    text-align:center; 
    position:relative; 
    left: 100%; 
    margin-top:80px; 
    cursor:pointer; 

    transform-origin:  0% 0%; 
    -ms-transform-origin:  0% 0%; 
    -webkit-transform-origin: 0% 0%; 
    -moz-transform-origin:  0% 0%; 
    -o-transform-origin:  0% 0%; 

    transform:   rotate(-90deg); 
    -ms-transform:  rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform:  rotate(-90deg); 
} 
#siteMap #theMap { 
    width:100%; 
    height:350px; 
    background-color:#666; 
    margin-top:-104px; 
} 

그리고 마지막으로 자바 스크립트를 :

<script type='text/javascript'> 
    $(document).ready(function() { 
    $('#mapButton').click(function() { 
     var mapPos = parseInt($('#siteMap').css('left'), 10); 
     if (mapPos < 0) { 
     $('#siteMap').animate({ 
      left: '+=500' 
      }, 458, 'swing', function() { 
      // Animation complete. 
      }); 
     } 
     else { 
     $('#siteMap').animate({ 
      left: '-=500' 
      }, 458, 'swing', function() { 
      // Animation complete. 
     }); 
     } 
    }); 
    }); 
</script> 

여기에서 Google에 온 경우 내 게시물이 도움이 될 것입니다.