如何解決jquery滑動面板問題？

Question

我需要翻轉一個div面板，一旦一個item div被點擊並隱藏，一旦item div再次被點擊。 （完全像新的twitter閱讀面板）。

我已經嘗試了幾種方法，但我無法使其動畫順暢。 最近我發現它不會順利發生，因爲我做的不好。我增加了outter div的寬度並減小了寬度。

有什麼好的建議或代碼片段來工作我的需要？

這裏是我已經使用了動畫和GT顯示更多閱讀DIV面板

$("#more-item").animate({"width": "toggle"}, { duration: 500,specialEasing: {width: 'linear', height: 'easeOutBounce'} }); 

這裏是我需要看到場景中的代碼。

1. clicked on item div 
2. more read div panel animate and flip to left and show the 
3. click again item div 
4. more read div panel animate and flip right and hide 

，當我們在第三點，如果我們再次點擊其他項目的div只是加載最近點擊格的內容，而不是動畫和隱藏更多閱讀DIV

這裏是截圖什麼我需要在新的Twitter功能閱讀面板。

Answer 1

您可以輕鬆地通過添加一個固定的定位<div>向右做到這一點，在容器包裝你的項目和相應的動畫面板和容器的保證金。

訣竅是使用top,bottom和right css屬性來定位閱讀面板。

這裏有一個演示：http://jsfiddle.net/wUGaY/1/

HTML：

<div class="panel"></div> 
<div class="container"> 
    <div class="item">One</div> 
    <div class="item">Two</div> 
    <div class="item">Three</div> 
    <div class="item">Four: This contains a bit longer text to test if wrapping is working correctly.</div> 
    <div class="item">Five</div> 
    <div class="item">Six</div> 
    <div class="item">Seven</div> 
    <div class="item">Eight</div> 
    <div class="item">Nine</div> 
    <div class="item">Ten</div> 
</div> 

CSS：

.panel { 
    position:fixed; 
    top:0px; 
    bottom:0px; 
    right:0px; 
    width:200px; 
    padding:20px; 
    border:1px solid #eee; 
    background-color:white; 
} 

.item { 
    border:1px solid #eee; 
    padding:20px; 
} 

.active { 
    background-color: #eee; 
} 

的Javascript：

$(function(){ 
    function showPanel() { 
     // Show the panel and animate it into view 
     $('.panel').stop().show().animate({ 
      right: '0px' 
     }); 
     // Animate the container's margin to make room 
     // for the reading panel 
     $('.container').stop().animate({ 
      marginRight: '232px' 
     }); 
    } 

    function hidePanel() { 
     // Move the panel off the screen and hide it when done 
     $('.panel').stop().animate({ 
      right: '-232px' 
     }, function(){ 
      $(this).hide(); 
     }); 

     // Animate the container's margin back to normal 
     $('.container').stop().animate({ 
      marginRight: '0px' 
     }); 
    } 

    // Hide the panel initially and set its position 
    $('.panel').hide().css('right','-232px'); 

    // What happens when they click on inactive items? 
    $('.container').delegate('.item:not(.active)', 'click', function() { 
     var $this = $(this); 

     // Make the current item the only active item 
     $('.active').removeClass('active'); 
     $this.addClass('active'); 

     // Add some content to the reading panel 
     $('.panel').html($this.html()); 

     // Show the reading panel 
     showPanel(); 
    }); 

    // What happens when they click on an active item? 
    $('.container').delegate('.active', 'click', function() { 
     // Make it inactive 
     $(this).removeClass('active'); 

     // Hide the reading panel 
     hidePanel(); 
    }); 
});