Question

我需要在点击一个项目div后隐藏div面板并隐藏，再次点击项目div。（就像新推特阅读小组一样）。

我尝试了几种方法，但我无法平滑地制作动画。最近我发现它没有顺利发生，因为我做了什么坏。我增加了外部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阅读面板上运行。 enter image description here

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

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

1 个答案: