如何修复Jquery滑动面板问题？

I need to flip a div panel left once a some item div get clicked and hide,once item div get clicked again. (exactly like new twitter reading panel).

我需要在一个项目div点击并隐藏后再翻转一个div面板,一旦再次点击一个项目div。 (就像新推特阅读面板一样)。

i have tried several methods but i couldn't animate it smooth. recently i identified it not happen smoothly because of the bad what have i done.i increased width of outter div and decrese width.

我尝试了几种方法,但我无法平滑地制作动画。最近我发现它没有顺利发生,因为我做了什么坏。我增加了外部div的宽度和减少宽度。

are there any good suggestion or code snippet to work my need??

是否有任何好的建议或代码片段来满足我的需求?

Here is the code that i have used for animate and gt show the more read div panel

这是我用于动画的代码,gt显示更多的阅读div面板

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

Here is the scenario that i need to see.

这是我需要看到的场景。

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

when we at third point if we again click another item div just load content of recent clicked div instead animate and hide the more read div

当我们在第三点时如果我们再次点击另一个项目div只是加载最近点击的div的内容而不是动画并隐藏更多的读取div

here is the screen shot what my need functioning on new twitter reading panel. 如何修复Jquery滑动面板问题？

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

1 个解决方案

#1

You can easily do this by adding a fixed positioned <div> to the right, wrap your items in a container and animate the panel and the container's margin accordingly.

您可以通过向右添加固定的

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

The trick is to use the top, bottom and right css properties to position the reading panel.

诀窍是使用顶部,底部和右侧css属性来定位阅读面板。

Here's a demo: http://jsfiddle.net/wUGaY/1/

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

#1