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

Question

我在这里尝试了这个:http://jsfiddle.net/92HXT/1/但它不起作用.它只适用于我使用show("slow")/ hide("slow").

谢谢.

Answer 1

虽然不是最清晰的动画,但我已经通过找到父母并隐藏所有兄弟姐妹来使其表现出我认为你想要的方式.我不确定为什么这会将元素向左滑动,而直接调用.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定位,使其表现更好,允许用户快速点击链接而不会破坏动画.添加白色背景和左边填充只是为了更好的效果演示.