jquery - 显示/隐藏 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 对解决方案的行为更新。我更改了 DIV 的定位，使其表现更好，允许用户快速单击链接而不会破坏动画。添加白色背景和左填充只是为了更好的效果呈现。

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>