Question

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

感谢。

Answer 1

虽然不是最清晰的动画，但我已经通过找到父级并隐藏所有兄弟姐妹来使其表现出我认为你想要的方式。我不确定为什么这会将元素向左滑动，而直接调用.siblings()似乎不会。

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

<强>更新：

虽然我仍然不确定为什么兄弟姐妹（）找不到你通过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);
});

这是updated version。

<强>更新：

@ jesus.tesh的解决方案excellent update

<强>更新：

@erwinjulius对解决方案的behavior update。我改变了DIVs定位，使其表现更好，允许用户快速点击链接而不会破坏动画。添加白色背景和左边填充只是为了更好的效果演示。

Answer 2

但是，这些代码有效，元素中的名称标签已经过时，符合W3C标准。

我尝试使用ID不起作用，然后我将名称标签更改为标题，这也符合W3C标准！

所以将“名称”更改为“标题”，这样功能很棒，请点击此处：http://design65grafischontwerp.nl/#portfolio

<script type="text/javascript">
    $(document).ready(function() {
        $('a').click(function() {
            var divtitle = this.title;
            $("#" + divtitle).show("slow").siblings().hide(1000);
        });
    });
</script>

用左/右幻灯片显示/隐藏div

2 个答案: