Jquery 隐藏并显示幻灯片效果

我想从左边滑入一个div，然后将电流移到右边，就像在iOS中一样，你可以来回移动

我试过这个，但似乎不起作用：

jQuery(".post .order").click(function() {
        jQuery(this).parents(".post-front")
            .hide("slide", { direction: "right" }, 1000);
            .next(".post-back")
            .show("slide", { direction: "left" }, 1000);
    });

标记：

<div class="post">
    <div class="post-front">
        <a href="#" class="next"></a>   
        ...
    </div>
    <div class="post-back">
        <a href="#" class="back"></a>
        ...
    </div>
</div>

...
...

是一个现场演示。这是你想要达到的目标吗？请评论。

请张贴标记并指定什么是不起作用的。考虑滑动外部容器元素而不是单个元素。您可以并排布置元素，使其中只有一个元素可见，然后水平平移容器，以便“滑动”各种元素？