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

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

谢谢。

Answer 1

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

看到这里 。

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

更新 ：

虽然我仍然不确定为什么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); }); 

这是更新版本 。

更新 ：

@ jesus.tesh对解决方案的出色更新

更新 ：

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

Answer 2

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

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

所以将“名称”更改为“标题”，它的function很棒，请看这里： http ： //design65grafischontwerp.nl/#portfolio