显示/隐藏 div 并带有向左\向右滑动动画

我在这里尝试过：http://jsfiddle.net/92HXT/1/但它不起作用。 仅当我使用时才有效show("slow")/hide("slow").

Thanks.

虽然不是最清晰的动画，但我通过找到父级并隐藏所有兄弟姐妹，使其能够按照我认为您想要的方式运行。我还不确定为什么这会将元素滑到左侧，而直接调用.siblings()似乎没有。

在这里看到的.

正如其他人提到的，使用类来标识一组项目是正确的方法，而不是通过 ID。

Update:

虽然我仍然不确定为什么siblings()找不到你通过ID找到的div的兄弟姐妹，但我怀疑它必须在显示/隐藏甚至可能使用滑动动画的过程中做一些事情。这是我建议的 jQuery/jQueryUI：

$('a.view-list-item').click(function () {
    var divname= this.name;
    $("#"+divname).show("slide", { direction: "left" }, 1000);
    $("#"+divname).parent().siblings(":visible").hide("slide", { direction: "left" }, 1000);
});

这里是更新后的版本.

Update:

An 很棒的更新解决方案@jesus.tesh

Update:

A 行为更新@erwinjulius 的解决方案。 我更改了 DIV 的定位，使其表现更好，允许用户快速单击链接而不破坏动画。 添加白色背景和左内边距只是为了更好的呈现效果。