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

Question

一旦某個項目 div 被點擊並隱藏，我需要向左翻轉一個 div 面板，一旦項目 div 再次被點擊。 （就像新的 twitter 閱讀面板一樣）。

我已經嘗試了幾種方法，但我無法平滑地制作動畫。 最近我發現它不會順利發生，因為我做了什么不好。我增加了外部 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 的內容而不是動畫並隱藏更多閱讀的 div

這是我需要在新的 twitter 閱讀面板上運行的屏幕截圖。

Answer 1

您可以通過在右側添加一個固定位置的<div>輕松做到這一點，將您的項目包裝在一個容器中並相應地為面板和容器的邊距設置動畫。

訣竅是使用top 、 bottom和right css 屬性到 position 閱讀面板。

這是一個演示： 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();
    });
});