javascript - 如何解决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 属性。

这是一个演示: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();
    });
});