jQuery - hoạt hình 'trái' vị trí của div vị trí hoàn toàn khi bảng trượt được tiết lộ

Question

Tôi có một bảng điều khiển ẩn ở phía bên trái của màn hình mà slide vào xem trên các bấm vào một 'tab' vị trí ở phía bên trái của màn. Tôi cần bảng điều khiển để trượt qua đầu nội dung trang hiện có và tôi cần tab để di chuyển với nó. và cả hai đều được định vị hoàn toàn trong css. Tất cả mọi thứ hoạt động tốt, ngoài việc tôi cần tab (và do đó các tab-container) để di chuyển trái với bảng điều khiển khi nó được tiết lộ, do đó, nó dường như bị mắc kẹt ở phía bên tay phải của bảng điều khiển. Nó tương đối đơn giản khi sử dụng phao, nhưng tất nhiên điều này ảnh hưởng đến cách bố trí của nội dung hiện có, do đó định vị tuyệt đối. Tôi đã thử làm động các vị trí bên trái của bảng điều khiển-container (xem chức năng jquery tài liệu), nhưng tôi không thể làm cho nó hoạt động.

Đây là ví dụ về mã ban đầu mà tôi đã thay đổi, làm cách nào để tôi có thể nhận được nút/tab để trượt?

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

HTML My

<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> 

My 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 
    }); 
    }); 

    }); 

và đây là 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; 
} 

Rất cám ơn

Answer 1

Tôi bắt đầu lại từ đầu, và thực sự đọc tài liệu jQuery hehe. Tôi đặt cả hai bảng điều khiển và nút trong một div vị trí hoàn toàn, nổi cả hai bên trái. Đưa thùng chứa một vị trí trái tiêu cực, sau đó đặt một hành động chuyển đổi jQuery trên nút.

$('#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

Tôi tình cờ gặp bài đăng này khi cố hoàn thành cùng một tác vụ.

Thật không may câu trả lời của Matt sẽ không còn hoạt động với phiên bản mới nhất của jQuery. Vào lúc Matt trả lời được viết, jQuery có hai hàm .toggle. Vào thời điểm tôi viết cái này, cái được sử dụng trong câu trả lời của anh ta đã không được chấp nhận nữa. Nếu mã của Matt được sử dụng, toàn bộ div sẽ biến mất, nút và tất cả. (Và nếu bạn đang như tôi rằng sẽ rất khó hiểu cho đến khi bạn đào vào tài liệu api và tìm hiểu về sự thay đổi)

tôi đã có thể để có được chức năng của tôi làm việc với đoạn mã sau:

HTML:

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

CSS (tôi biết điều này không phải là rất sạch sẽ chưa):

#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; 
} 

Và cuối cùng JavaScript:

<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> 

Hy vọng rằng nếu bạn đến đây từ Google, bài đăng của tôi sẽ hữu ích :)