Javascript 如何解决Jquery滑动面板问题？

我需要翻转一个div面板左一旦某个项目div被点击并隐藏，一旦项目div再次被点击。（与新的twitter阅读面板完全相同）

我尝试了几种方法，但我无法使其动画平滑。 最近我发现由于我所做的不好，它并没有顺利发生。我增加了outter div的宽度，减少了宽度

有什么好的建议或代码片段可以满足我的需要吗

下面是我用于动画和gt显示more read 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的内容，而不是动画并隐藏更多的read div

这是我需要在新的twitter阅读面板上运行的屏幕截图。

---

您可以通过在右侧添加固定位置的

来轻松完成此操作，将您的项目包装在容器中，并相应地设置面板和容器边距的动画

诀窍是使用

顶部

、

底部

和

右侧

css属性来定位阅读面板

下面是一个演示：

HTML:

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

---

你能把这个放在一个html的例子里吗？第二个是小提琴的请求。根据自己的经验，一个问题是：450px是准确的吗？如果你把它推到离左边很远的地方，你自然会遇到延迟。@polarblau我不是css和html专家，只是我能看到我的代码有什么问题吗？我的代码有错误，你能解释一下如何绕过这个问题吗？哇，做得好，你能帮我检查一下吗？我不知道。

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

$(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();
    });
});