jQuery 显示/隐藏带有向左/向右滑动动画的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11017332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show/hide div with slide left\right animation
提问by user1453918
I tried this here: http://jsfiddle.net/92HXT/1/but it does not work.
It only works if I use show("slow")/hide("slow").
我在这里尝试过：http: //jsfiddle.net/92HXT/1/但它不起作用。它仅在我使用show("slow")/时才有效hide("slow")。
Thanks.
谢谢。
回答by veeTrain
While not the sharpest animation, I have enabled it to behave the way I think you're wanting by finding the parent and hiding all the siblings. I'm not sure yet why this slides the elements out to the left whereas a direct call to .siblings()doesn't seem to.
虽然不是最清晰的动画，但我已通过查找父项并隐藏所有兄弟姐妹使其按照我认为您想要的方式运行。我还不确定为什么这会将元素向左滑动，而直接调用.siblings()似乎没有。
看到这里。
As others have mentioned, using classes to identify a group of items is the correct approach instead of by ID.
正如其他人所提到的，使用类来识别一组项目是正确的方法，而不是通过 ID。
Update:
更新：
While I'm still not sure why siblings() doesn't find the siblings to the div you've found by ID, I'm suspecting it has to do something with the process of showing / hiding or possibly even using the sliding animation. Here is my suggested jQuery/jQueryUI:
虽然我仍然不确定为什么 Brothers() 没有找到您通过 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);
});
Here is the updated version.
这是更新的版本。
Update:
更新：
An excellent updateto the solution by @jesus.tesh
@jesus.tesh 对解决方案的出色更新
Update:
更新：
A behavior updateto the solution by @erwinjulius. I changed DIVs positioning so it behaves better, allowing user to click on links quickly without breaking the animation. Added white background and left-padding just for better effect presentation.
一个行为更新由@erwinjulius的解决方案。我改变了 DIV 的定位，使其表现得更好，允许用户快速点击链接而不会破坏动画。添加白色背景和左填充只是为了更好的效果展示。
回答by Gerard Diepeveen
However, this codes works, the name tag in elements is obsolete to W3C standards.
但是，此代码有效，元素中的名称标签对于 W3C 标准已过时。
I tried with ID's does not work, then I changed the name tag to the title and this works too and you comply with W3C standards!
我尝试使用 ID 不起作用，然后我将名称标签更改为标题，这也有效，并且您符合 W3C 标准！
So change "name" to "title" like this, it functions great, sees here: http://design65grafischontwerp.nl/#portfolio
因此，像这样将“名称”更改为“标题”，它的功能很棒，请参见此处：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>
