使用向左/右滑动动画显示/隐藏div

Question

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

谢谢。

- user1453918

---

你为什么在多个元素中使用了相同的“id”？绝对是错误的。 - thecodeparadox

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的解决方案有一个行为更新。 我改变了DIV的定位，使其更好地运作，使用户能够快速点击链接而不会破坏动画效果。 添加了白色背景和左填充，只是为了更好的效果展示。

- veeTrain

---

@user1453918；很高兴看起来这对你有用。我已经更新了我的建议，可能会提高其用户友好性。如果它确实回答了你的问题，请随意接受这个答案。 - veeTrain

是的，非常感谢，我一定会使用你脚本的最新版本！;) - user1453918

我修改了这个小工具，使动画更加流畅：jsfiddle - 这只是另一个选项供您选择。 - Tim Hobbs

只是为了澄清，看起来 .show("slide") 函数需要 jQuery UI。 - peater

这仅适用于JQuery <= 1.7.2，Jquery 2无法运行。 - Wagner Pereira

Answer 2

然而，这段代码虽然可用，但元素中的名称标签已经过时了W3C标准。

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

因此，请像这样将“name”更改为“title”，它可以很好地运行，看到这里：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>

- Gerard Diepeveen